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 文件引入实现代码
Apr 23 Javascript
jquery ajax提交表单数据的两种实现方法
Apr 29 Javascript
理解JSON:3分钟课程
Oct 28 Javascript
javascript中this做事件参数相关问题解答
Mar 17 Javascript
IE、FF、Chrome浏览器中的JS差异介绍
Aug 13 Javascript
jQuery异步上传文件插件ajaxFileUpload详细介绍
May 19 Javascript
js 打开新页面在屏幕中间的实现方法
Nov 02 Javascript
微信小程序访问node.js接口服务器搭建教程
Apr 25 Javascript
用vue构建多页面应用的示例代码
Sep 20 Javascript
Vue 页面切换效果之 BubbleTransition(推荐)
Apr 08 Javascript
在layui下对元素进行事件绑定的实例
Sep 06 Javascript
jQuery实现简单聊天室
Feb 08 jQuery
全面解析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 If Else(elsefi) 语句
2013/04/07 PHP
PHP仿博客园 个人博客(2) 数据库增添改删
2013/07/05 PHP
PHP实现图片压缩的两则实例
2014/07/19 PHP
php使用正则验证中文
2016/04/06 PHP
JS下高效拼装字符串的几种方法比较与测试代码
2010/04/15 Javascript
JS判断是否为数字,是否为整数,是否为浮点数的代码
2010/04/24 Javascript
TreeView 用法(有代码)(asp.net)
2011/07/15 Javascript
JS Loading功能的简单实现
2013/11/29 Javascript
javascript计算当月剩余天数(天数计算器)示例代码
2014/01/09 Javascript
JavaScript DOM基础
2015/04/13 Javascript
纯js模拟div层弹性运动的方法
2015/07/27 Javascript
javascript表单验证大全
2015/08/12 Javascript
清空元素html(&quot;&quot;) innerHTML=&quot;&quot; 与 empty()的区别和应用(推荐)
2017/08/14 Javascript
Angular实现预加载延迟模块的示例
2017/10/12 Javascript
Vue实现点击后文字变色切换方法
2018/02/11 Javascript
Angular5集成eventbus的示例代码
2018/07/19 Javascript
Python实现连接两个无规则列表后删除重复元素并升序排序的方法
2018/02/05 Python
Python判断一个list中是否包含另一个list全部元素的方法分析
2018/12/24 Python
python多任务及返回值的处理方法
2019/01/22 Python
Python基本语法之运算符功能与用法详解
2019/10/22 Python
使用python的turtle函数绘制一个滑稽表情
2020/02/28 Python
如何导出python安装的所有模块名称和版本号到文件中
2020/06/05 Python
python计算auc的方法
2020/09/09 Python
matplotlib自定义鼠标光标坐标格式的实现
2021/01/08 Python
Html5中的桌面通知Notification的实现
2018/09/25 HTML / CSS
夜大毕业生自我评价分享
2013/11/10 职场文书
校园新闻广播稿
2014/01/10 职场文书
委托培训协议书
2014/11/17 职场文书
网络研修心得体会
2016/01/08 职场文书
《爬天都峰》教学反思
2016/02/23 职场文书
公司转让协议书
2016/03/19 职场文书
品牌形象定位,全面分析
2019/07/23 职场文书
有趣的二维码:使用MyQR和qrcode来制作二维码
2021/05/10 Python
使用JS实现简易计算器
2021/06/14 Javascript
Django实现WebSocket在线聊天室功能(channels库)
2021/09/25 Python
科普 | 业余无线电知识-波段篇
2022/02/18 无线电