JavaScript获取tr td 的三种方式全面总结(推荐)


Posted in Javascript onAugust 15, 2017

        /* 第一种,原生的js,先获取table然后获取tr标签,然后遍历td */

//     $('#selectIds').val("");
//      var table = document.getElementById("tb_table");//获取第一个表格 
//      var array = table.getElementsByTagName("tr");//所有tr
//      for(var i = 1; i < array.length; i++) {
//       var id = array[i].children;
//       var idtext = id[1].innerHTML;
//       if(i == 1){
//         $('#selectIds').val($('#selectIds').val() + "" + idtext); 
//       }else{
//         $('#selectIds').val($('#selectIds').val() + "," + idtext);
//       }
//       }

 
   /* jQuery的写法,获取到tr然后遍历所有的td。注意td获取值是.text(); */

//   $('#selectIds').val("");
//   var isFirst = true;
//    $("#tb_table").find("tr").each(function(){
//      var tdArr = $(this).children();
//      var idtext = tdArr.eq(1).text();
//      if(idtext != '人员ID'){
//        if(isFirst){
//        $('#selectIds').val($('#selectIds').val() + "" + idtext); 
//        isFirst = false
//        }else{
//          $('#selectIds').val($('#selectIds').val() + "," + idtext);
//        }
//      console.log("idtext",idtext);
//      }
//    })

 
    /* 原生js获取所有行,再获取每个单元格 */

//   var table = document.getElementById("tb_table");
//   var rows = table.rows;//获取所有行
//   console.log("lenth",rows.length) //
//   for(var i=1; i < rows.length; i++){
//     var row = rows[i];//获取每一行
//     var id = row.cells[1].innerHTML;//获取具体单元格
//     console.log("id",id)
//   }

总结:

$(this).children().eq(1).text()获取的是显示的值

$(this).children().eq(1).html()获取的是<td></td>之间的所有内容

$('.trSelected',grid).find("td").eq(7).text();获取的是选中的某行的内容

设置值:$('.trSelected',grid).find("td").eq(7).text(‘'设置内容‘')

xxx.innerHTML; 是js里面获取对象的值。

遍历表<table id="gird".....
$("#grid tr").each(function() {
             alert($(this).children().eq(1).text());
 });

用JavaScript来遍历

function load(){
   var tab=document.getElementById("grid");
   var rows=tab.rows;
   alert(rows.length);
   for(var i=0;i<rows.length;i++)
   {
    for(var j=0;j<rows[i].cells.length;j++)
    {
    alert("第"+(i+1)+"行,第"+(j+1)+"列的值是:"+rows[i].cells[j].innerHTML);
    }
   }
  }

以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作能带来一定的帮助~如果有疑问大家可以留言交流,谢谢大家对三水点靠木的支持!

Javascript 相关文章推荐
js tab 选项卡
Apr 26 Javascript
基于jQuery的图片大小自动适应实现代码
Nov 17 Javascript
javascript阻止scroll事件多次执行的思路及实现
Nov 08 Javascript
js 立即调用的函数表达式如何写
Jan 12 Javascript
jQuery响应鼠标事件并隐藏与显示input默认值
Aug 24 Javascript
微信小程序 JS动态修改样式的实现代码
Feb 10 Javascript
vue移动UI框架滑动加载数据的方法
Mar 12 Javascript
vue 纯js监听滚动条到底部的实例讲解
Sep 03 Javascript
vue 取出v-for循环中的index值实例
Nov 09 Javascript
js实现计时器秒表功能
Dec 16 Javascript
JS实现网页烟花动画效果
Mar 10 Javascript
前端vue+express实现文件的上传下载示例
Feb 18 Vue.js
全面解析jQuery中的$(window)与$(document)的用法区别
Aug 15 #jQuery
Vue组件通信实践记录(推荐)
Aug 15 #Javascript
js移动端事件基础及常用事件库详解
Aug 15 #Javascript
js实现移动端轮播图效果
Dec 09 #Javascript
JavaScript递归算法生成树形菜单
Aug 15 #Javascript
JavaScript中附件预览功能实现详解(推荐)
Aug 15 #Javascript
input输入框内容实时监测(附代码)
Aug 15 #Javascript
You might like
PHP 验证码不显示只有一个小红叉的解决方法
2013/09/30 PHP
PHP使用CURL_MULTI实现多线程采集的例子
2014/07/29 PHP
详解 PHP加密解密字符串函数附源码下载
2015/12/18 PHP
php简单实现文件或图片强制下载的方法
2016/12/06 PHP
javascript 对象定义方法 简单易学
2009/03/22 Javascript
iframe 父窗口和子窗口相互的调用方法集锦
2010/12/15 Javascript
浅说js变量
2011/05/25 Javascript
基于JQuery的多标签实现代码
2012/09/19 Javascript
js制作的鼠标悬浮时产生的下拉框效果
2012/10/27 Javascript
jQuery基于$.ajax设置移动端click超时处理方法
2016/05/14 Javascript
vue2.0开发实践总结之入门篇
2016/12/06 Javascript
JS 实现计算器详解及实例代码(一)
2017/01/08 Javascript
JavaScript实现省市联动过程中bug的解决方法
2017/12/04 Javascript
VUE接入腾讯验证码功能(滑块验证)备忘
2019/05/07 Javascript
JavaScript实现星级评价效果
2019/05/17 Javascript
微信小程序下拉加载和上拉刷新两种实现方法详解
2019/09/05 Javascript
JQuery使用数组遍历跳出each循环
2020/09/01 jQuery
[01:23:24]DOTA2-DPC中国联赛 正赛 PSG.LGD vs Elephant BO3 第三场 2月7日
2021/03/11 DOTA
python基础教程项目三之万能的XML
2018/04/02 Python
PyCharm在新窗口打开项目的方法
2019/01/17 Python
Python获取excel内容及相关操作代码实例
2020/08/10 Python
详解CSS3媒体查询响应式布局bootstrap 框架原理实战(推荐)
2020/11/16 HTML / CSS
网站性能延迟加载图像的五种技巧(小结)
2020/08/13 HTML / CSS
鞋子女王塔玛拉·梅隆同名奢侈品牌:Tamara Mellon
2017/11/22 全球购物
Expedia挪威官网:酒店、机票和租车
2018/03/03 全球购物
美国伴娘礼服商店:Evening Collective
2019/10/07 全球购物
旷课检讨书3000字
2014/02/04 职场文书
防邪知识进家庭活动方案
2014/08/26 职场文书
优秀教师事迹材料
2014/12/15 职场文书
幼儿园食品安全责任书
2015/05/08 职场文书
2016年第32个教师节致辞
2015/11/26 职场文书
导游词之无锡古运河
2019/11/14 职场文书
何时使用Map来代替普通的JS对象
2021/04/29 Javascript
Navicat连接MySQL错误描述分析
2021/06/02 MySQL
使用canvas对video视频某一刻截图功能
2021/09/25 HTML / CSS
Python 数据可视化之Seaborn详解
2021/11/02 Python