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获取数组最大和最小值示例代码
Oct 29 Javascript
原生JS操作网页给p元素添加onclick事件及表格隔行变色
Dec 01 Javascript
浅谈JavaScript 浏览器对象
Jun 03 Javascript
AngularJS入门教程之控制器详解
Jul 27 Javascript
domReady的实现案例
Nov 23 Javascript
jQuery 添加样式属性的优先级别方法(推荐)
Jun 08 jQuery
vue单页面实现当前页面刷新或跳转时提示保存
Nov 02 Javascript
谈谈JavaScript中super(props)的重要性
Feb 12 Javascript
微信小程序如何修改radio和checkbox的默认样式和图标
Jul 24 Javascript
基于better-scroll 实现歌词联动功能的代码
May 07 Javascript
vite+vue3.0+ts+element-plus快速搭建项目的实现
Jun 24 Vue.js
vue项目中的支付功能实现(微信支付和支付宝支付)
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 strtotime 函数UNIX时间戳
2009/01/14 PHP
php imagecreatetruecolor 创建高清和透明图片代码小结
2010/05/15 PHP
php开发文档 会员收费1期
2012/08/14 PHP
初步介绍PHP扩展开发经验分享
2012/09/06 PHP
Yii2使用小技巧之通过 Composer 添加 FontAwesome 字体资源
2014/06/22 PHP
phplist及phpmailer(组合使用)通过gmail发送邮件的配置方法
2016/03/30 PHP
PHP 将dataurl转成图片image方法总结
2016/10/14 PHP
PHP获取访问页面HTTP状态码的实现代码
2016/11/03 PHP
php中输出json对象的值(实现方法)
2018/03/07 PHP
js跨域和ajax 跨域问题的实现思路
2009/09/05 Javascript
jQuery 自定义函数写法分享
2012/03/30 Javascript
Javascript中判断变量是数组还是对象(array还是object)
2013/08/14 Javascript
js 页面元素的几个用法总结
2013/11/18 Javascript
简洁实用的BootStrap jQuery手风琴插件
2016/08/31 Javascript
Node.js中用D3.js的方法示例
2017/01/16 Javascript
js移动端事件基础及常用事件库详解
2017/08/15 Javascript
详解vue-cli脚手架build目录中的dev-server.js配置文件
2017/11/24 Javascript
nodejs简单实现TCP服务器端和客户端的聊天功能示例
2018/01/04 NodeJs
微信小程序多音频播放进度条问题
2018/08/28 Javascript
swiper4实现移动端导航切换
2020/10/16 Javascript
JavaScript 异步时序问题
2020/11/20 Javascript
JavaScript实现雪花飘落效果
2020/12/27 Javascript
Python实时获取cmd的输出
2015/12/13 Python
解决nohup重定向python输出到文件不成功的问题
2018/05/11 Python
python 求一个列表中所有元素的乘积实例
2019/06/11 Python
用django设置session过期时间的方法解析
2019/08/05 Python
使用django和vue进行数据交互的方法步骤
2019/11/11 Python
python通用读取vcf文件的类(复制粘贴即可用)
2020/02/29 Python
PyChon中关于Jekins的详细安装(推荐)
2020/12/28 Python
运动会方阵解说词
2014/02/12 职场文书
双语教学实施方案
2014/03/23 职场文书
银行求职自荐书
2014/06/25 职场文书
2015年教师节新闻稿
2015/07/17 职场文书
天谕手游15杯全调酒配方和调酒券的获得方式
2022/04/06 其他游戏
vue 实现弹窗关闭后刷新效果
2022/04/08 Vue.js
项目中Nginx多级代理是如何获取客户端的真实IP地址
2022/05/30 Servers