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 相关文章推荐
动态获取复选框checkbox选中个数的jquery代码
Jun 25 Javascript
jQuery层级选择器用法分析
Feb 10 Javascript
深入理解js函数的作用域与this指向
May 28 Javascript
js微信支付实现代码
Dec 22 Javascript
微信分享调用jssdk实例
Jun 08 Javascript
vue路由组件按需加载的几种方法小结
Jul 12 Javascript
jQuery基于随机数解决中午吃什么去哪吃问题示例
Dec 29 jQuery
Vue+element 解决浏览器自动填充记住的账号密码问题
Jun 11 Javascript
Vue利用Blob下载原生二进制数组文件
Sep 25 Javascript
Vue通过getAction的finally来最大程度避免影响主数据呈现问题
Apr 24 Javascript
Vue中key的作用示例代码详解
Jun 10 Javascript
Vue 组件的挂载与父子组件的传值实例
Sep 02 Javascript
全面解析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/06/08 PHP
ThinkPHP令牌验证实例
2014/06/18 PHP
PHP中file_exists()判断中文文件名无效的解决方法
2014/11/12 PHP
PHP多线程之内部多线程实例分析
2015/03/09 PHP
php创建无限级树型菜单
2015/11/05 PHP
PHP与Ajax相结合实现登录验证小Demo
2016/03/16 PHP
弹出模态框modal的实现方法及实例
2017/09/19 PHP
thinkPHP5框架设置404、403等http状态页面的方法
2018/06/05 PHP
javascript 表单规则集合对象
2009/07/21 Javascript
JavaScript 面向对象之命名空间
2010/05/04 Javascript
JQUERY1.6 使用方法四 检测浏览器
2011/11/23 Javascript
非常好用的JsonToString 方法 简单实例
2013/07/18 Javascript
jQuery动态显示和隐藏datagrid中的某一列的方法
2013/12/11 Javascript
深入理解jQuery3.0的domManip函数
2016/09/01 Javascript
详解AngularJS中的表单验证(推荐)
2016/11/17 Javascript
jQuery动态生成表格及右键菜单功能示例
2017/01/13 Javascript
小程序异步问题之多个网络请求依次执行并依次收集请求结果
2019/05/05 Javascript
vue css 引入asstes中的图片无法显示的四种解决方法
2020/03/16 Javascript
Javascript模块化机制实现原理详解
2020/04/02 Javascript
使用python统计文件行数示例分享
2014/02/21 Python
在Python中操作列表之List.append()方法的使用
2015/05/20 Python
Python中将字典转换为XML以及相关的命名空间解析
2015/10/15 Python
Python中的Descriptor描述符学习教程
2016/06/02 Python
python使用筛选法计算小于给定数字的所有素数
2018/03/19 Python
使用python socket分发大文件的实现方法
2019/07/08 Python
Python基于yield遍历多个可迭代对象
2020/03/12 Python
HTML5的新特性(1)
2016/03/03 HTML / CSS
俄罗斯鲜花递送:AMF
2020/04/24 全球购物
应届生求职自荐信
2014/07/04 职场文书
项目合作意向书模板
2014/07/29 职场文书
供电工程专业求职信
2014/08/09 职场文书
《彼得与狼》教学反思
2016/02/20 职场文书
java固定大小队列的几种实现方式详解
2021/07/15 Java/Android
html粘性页脚的具体使用
2022/01/18 HTML / CSS
使用Apache Camel表达REST服务的方法
2022/06/10 Servers
手把手带你彻底卸载MySQL数据库
2022/06/14 MySQL