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 相关文章推荐
基于jquery实现点击左右按钮图片横向滚动
Apr 11 Javascript
js几秒以后倒计时跳转示例
Dec 26 Javascript
使用HTML+CSS+JS制作简单的网页菜单界面
Jul 27 Javascript
JavaScript 数据类型详解
Mar 13 Javascript
bootstrap3使用bootstrap datetimepicker日期插件
May 24 Javascript
JavaScript中一些特殊的字符运算
Aug 17 Javascript
利用jquery如何从json中读取数据追加到html中
Dec 01 jQuery
Angular4.x通过路由守卫进行路由重定向实现根据条件跳转到相应的页面(推荐)
May 10 Javascript
vue项目上传Github预览的实现示例
Nov 06 Javascript
Vuex modules模式下mapState/mapMutations的操作实例
Oct 17 Javascript
Vue快速实现通用表单验证的示例代码
Jan 09 Javascript
JavaScript变量Dom对象的所有属性
Apr 30 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
Protoss热键控制
2020/03/14 星际争霸
生成ubuntu自动切换壁纸xml文件的php代码
2010/07/17 PHP
php中利用post传递字符串重定向的实现代码
2011/04/21 PHP
PHP实现的封装验证码类详解
2013/06/18 PHP
php检测网页是否被百度收录的函数代码
2013/10/09 PHP
通过PHP实现用户注册后邮箱验证激活
2020/11/10 PHP
自己开发Dojo的建议框架
2008/09/24 Javascript
event对象的方法 兼容多浏览器
2009/06/27 Javascript
初窥JQuery(二) 事件机制(1)
2010/11/25 Javascript
JS左右无缝滚动(一般方法+面向对象方法)
2012/08/17 Javascript
浅析LigerUi开发中谨慎载入common.css文件
2013/07/09 Javascript
浅谈jquery回调函数callback的使用
2015/01/30 Javascript
jquery实现浮动的侧栏实例
2015/06/25 Javascript
使用javascript将时间转换成今天,昨天,前天等格式
2015/06/25 Javascript
javascript中checkbox使用方法简单实例演示
2015/11/17 Javascript
JavaScript中的ParseInt(&quot;08&quot;)和“09”返回0的原因分析及解决办法
2016/05/19 Javascript
jQuery动态添加可拖动元素完整实例(附demo源码下载)
2016/06/21 Javascript
Bootstrap实现提示框和弹出框效果
2017/01/11 Javascript
详解nodejs中exports和module.exports的区别
2017/02/17 NodeJs
View.post() 不靠谱的地方你知道多少
2017/08/29 Javascript
electron中使用bootstrap的示例代码
2018/11/06 Javascript
详解滑动穿透(锁body)终极探索
2019/04/16 Javascript
TypeScript类型声明书写详解
2019/08/28 Javascript
js实现动态时钟
2020/03/12 Javascript
[01:00:14]DOTA2-DPC中国联赛 正赛 Ehome vs Elephant BO3 第二场 2月28日
2021/03/11 DOTA
Python中正则表达式的详细教程
2015/04/30 Python
使用Pyinstaller的最新踩坑实战记录
2017/11/08 Python
Python学习小技巧总结
2018/06/10 Python
Python+OpenCv制作证件图片生成器的操作方法
2019/08/21 Python
Pytorch之view及view_as使用详解
2019/12/31 Python
浅谈SciPy中的optimize.minimize实现受限优化问题
2020/02/29 Python
详解HTML5中的Communication API基本使用方法
2016/01/29 HTML / CSS
英国排名第一的餐具品牌:Denby Pottery
2019/11/01 全球购物
国际贸易系求职信
2014/08/09 职场文书
2015年银行客户经理工作总结
2015/04/01 职场文书
社区党务工作总结2015
2015/05/19 职场文书