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 相关文章推荐
TFDN图片播放器 不错自动播放
Oct 03 Javascript
学习YUI.Ext 第二天
Mar 10 Javascript
javascript应用:Iframe自适应其加载的内容高度
Apr 10 Javascript
CSS+Jquery实现页面圆角框方法大全
Dec 24 Javascript
Lazy Load 延迟加载图片的 jQuery 插件
Feb 06 Javascript
JavaScript CSS修改学习第三章 修改样式表
Feb 19 Javascript
JSON与XML优缺点对比分析
Jul 17 Javascript
JavaScript File分段上传
Mar 10 Javascript
Javascript中浏览器窗口的基本操作总结
Aug 18 Javascript
JSON字符串和JSON对象相互转化实例详解
Jan 05 Javascript
JavaScript隐式类型转换代码实例
May 29 Javascript
VUE+Element实现增删改查的示例源码
Nov 23 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
全国FM电台频率大全 - 7 吉林省
2020/03/11 无线电
PHP学习资料汇总与网址
2007/03/16 PHP
PHP读取CURL模拟登录时生成Cookie文件的方法
2014/11/04 PHP
制作个性化的WordPress登陆界面的实例教程
2016/05/21 PHP
PHP面向对象中new self()与 new static()的区别浅析
2017/08/17 PHP
PHP substr()函数参数解释及用法讲解
2017/11/23 PHP
PHP性能分析工具xhprof的安装使用与注意事项
2017/12/19 PHP
PHP连接及操作PostgreSQL数据库的方法详解
2019/01/30 PHP
php实现登录页面的简单实例
2019/09/29 PHP
js获取当前select 元素值的代码
2010/04/19 Javascript
jquery向.ashx文件post中文乱码问题的解决方法
2011/03/28 Javascript
javascript格式化json显示实例分析
2015/04/21 Javascript
javascript中html字符串转化为jquery dom对象的方法
2015/08/27 Javascript
js实现超简单的展开、折叠目录代码
2015/08/28 Javascript
基于javascript制作微信聊天面板
2020/08/09 Javascript
全面解析Bootstrap表单样式的使用
2016/09/09 Javascript
JS定时检测任务任务完成后执行下一步的解决办法
2016/12/22 Javascript
详解微信小程序 通过控制CSS实现view隐藏与显示
2017/05/24 Javascript
JS+HTML5 FileReader实现文件上传前本地预览功能
2020/03/27 Javascript
node版本管理工具n包使用教程详解
2018/11/09 Javascript
Python wxPython库使用wx.ListBox创建列表框示例
2018/09/03 Python
Python多进程池 multiprocessing Pool用法示例
2018/09/07 Python
使用Python计算玩彩票赢钱概率
2019/06/26 Python
基于Python2、Python3中reload()的不同用法介绍
2019/08/12 Python
Python装饰器实现方法及应用场景详解
2020/03/26 Python
详解Css3新特性应用之过渡与动画
2017/01/10 HTML / CSS
css3实现画半圆弧线的示例代码
2017/11/06 HTML / CSS
详解HTML5 window.postMessage与跨域
2017/05/11 HTML / CSS
瑜伽国际:Yoga International
2018/04/18 全球购物
美国演唱会和体育门票购买网站:Ticketnetwork
2018/10/19 全球购物
Goodee官方商店:迷你投影仪
2021/03/15 全球购物
医学生职业规划范文
2014/01/05 职场文书
农业项目建议书
2014/08/25 职场文书
学习群众路线的心得体会
2014/11/05 职场文书
安装工程师岗位职责
2015/02/13 职场文书
青春雷锋观后感
2015/06/10 职场文书