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处理json以及字符串的比较等常用操作
Sep 08 Javascript
理运用命名空间让js不产生冲突避免全局变量的泛滥
Jun 15 Javascript
js打造数组转json函数
Jan 14 Javascript
实例讲解JavaScript中instanceof运算符的用法
Jun 08 Javascript
vue.js表格分页示例
Oct 18 Javascript
bootstrap suggest搜索建议插件使用详解
Mar 25 Javascript
Vue的土著指令和自定义指令实例详解
Feb 04 Javascript
Electron-vue脚手架改造vue项目的方法
Oct 22 Javascript
支付宝小程序自定义弹窗dialog插件的实现代码
Nov 30 Javascript
微信小程序module.exports模块化操作实例浅析
Dec 20 Javascript
原生js实现无缝轮播图
Jan 11 Javascript
解决VantUI popup 弹窗不弹出或无蒙层的问题
Nov 03 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通过COM类调用组件的实现代码
2012/01/11 PHP
php运行时动态创建函数的方法
2015/03/16 PHP
php版微信自动获取收货地址api用法示例
2016/09/22 PHP
PHP页面跳转操作实例分析(header方法)
2016/09/28 PHP
php和html的区别点详细总结
2019/09/24 PHP
Mac下关于PHP环境和扩展的安装详解
2019/10/17 PHP
js form action动态修改方法
2008/11/04 Javascript
JavaScript window.setTimeout() 的详细用法
2009/11/04 Javascript
js模拟hashtable的简单实例
2014/03/06 Javascript
jquery鼠标放上去显示悬浮层即弹出定位的div层
2014/04/25 Javascript
js实现发送验证码后的倒计时功能
2015/05/28 Javascript
JS实现带有3D立体感的银灰色竖排折叠菜单代码
2015/10/20 Javascript
Nodejs获取网络数据并生成Excel表格
2020/03/31 NodeJs
Bootstrap框架下下拉框select搜索功能
2020/03/26 Javascript
原生JS轮播图插件
2017/02/09 Javascript
JavaScript中的this陷阱的最全收集并整理(没有之一)
2017/02/21 Javascript
vue引入jq插件的实例讲解
2017/09/12 Javascript
在移动端使用vue-router和keep-alive的方法示例
2018/12/02 Javascript
Vue.js结合bootstrap前端实现分页和排序效果
2018/12/29 Javascript
taro开发微信小程序的实践
2019/05/21 Javascript
Nodejs封装类似express框架的路由实例详解
2020/01/05 NodeJs
vue组件中传值EventBus的使用及注意事项说明
2020/11/16 Javascript
python字典序问题实例
2014/09/26 Python
Python对象转JSON字符串的方法
2016/04/27 Python
解决Python找不到ssl模块问题 No module named _ssl的方法
2019/04/29 Python
python实现连连看辅助之图像识别延伸
2019/07/17 Python
详解如何用python实现一个简单下载器的服务端和客户端
2019/10/28 Python
Python+OpenCV实现旋转文本校正方式
2020/01/09 Python
Python修改列表值问题解决方案
2020/03/06 Python
用HTML5制作一个简单的弹力球游戏
2015/05/12 HTML / CSS
幼儿教师师德师风自我评价
2015/03/05 职场文书
重阳节简报
2015/07/20 职场文书
个人业务学习心得体会
2016/01/25 职场文书
2016年小学“公民道德宣传日”活动总结
2016/04/01 职场文书
一次MySQL启动导致的事故实战记录
2021/09/15 MySQL
Python爬虫 简单介绍一下Xpath及使用
2022/04/26 Python