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 相关文章推荐
asp(javascript)全角半角转换代码 dbc2sbc
Aug 06 Javascript
javascript与CSS复习(《精通javascript》)
Jun 29 Javascript
javascript克隆对象深度介绍
Nov 20 Javascript
jquery mobile实现拨打电话功能的几种方法
Aug 05 Javascript
如何实现JavaScript动态加载CSS和JS文件
Dec 28 Javascript
jQuery实现为控件添加水印文字效果(附源码)
Dec 02 Javascript
JavaScript  event对象整理及详细介绍
Oct 10 Javascript
js实现表格筛选功能
Jan 18 Javascript
用JavaScript实现让浏览器停止载入页面的方法
Jan 19 Javascript
使用Vue-cli 3.0搭建Vue项目的方法
Jun 07 Javascript
在vue 中使用 less的教程详解
Sep 26 Javascript
Vue匿名插槽与作用域插槽的合并和覆盖行为
Apr 22 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获取当前网址及域名的实现代码
2013/06/23 PHP
PHP引用(&amp;)各种使用方法实例详解
2014/03/20 PHP
php socket客户端及服务器端应用实例
2014/07/04 PHP
浅谈PHP中的数据传输CURL
2016/09/06 PHP
PHP实现求连续子数组最大和问题2种解决方法
2017/12/26 PHP
提高网站信任度的技巧
2008/10/17 Javascript
JavaScript 以对象为索引的关联数组
2010/05/19 Javascript
一个js拖拽的效果类和dom-drag.js浅析
2010/07/17 Javascript
Js切换功能的简单方法
2010/11/23 Javascript
jQuery中delegate与on的用法与区别示例介绍
2013/12/20 Javascript
教你用十行node.js代码读取docx的文本
2017/03/08 Javascript
详解vue-cli与webpack结合如何处理静态资源
2017/09/19 Javascript
详解组件库的webpack构建速度优化
2018/06/18 Javascript
vue  自定义组件实现通讯录功能
2018/09/30 Javascript
微信小程序 函数防抖 解决重复点击消耗性能问题实现代码
2019/09/12 Javascript
通过实例解析json与jsonp原理及使用方法
2020/09/27 Javascript
[46:55]LGD vs Liquid 2019国际邀请赛小组赛 BO2 第一场 8.16
2019/08/19 DOTA
Python实例之wxpython中Frame使用方法
2014/06/09 Python
python 遍历列表提取下标和值的实例
2018/12/25 Python
Python-ElasticSearch搜索查询的讲解
2019/02/25 Python
python读取.mat文件的数据及实例代码
2019/07/12 Python
使用jupyter notebook将文件保存为Markdown,HTML等文件格式
2020/04/14 Python
python中return如何写
2020/06/18 Python
CSS3 伪类选择器 nth-child()说明
2010/07/10 HTML / CSS
教你如何一步一步用Canvas写一个贪吃蛇
2018/10/22 HTML / CSS
AmazeUI 加载进度条的实现示例
2020/08/20 HTML / CSS
资产经营总监岗位职责
2013/12/04 职场文书
部队学习十八大感言
2014/01/11 职场文书
护理学专业求职信
2014/06/29 职场文书
逃课检讨书
2015/01/26 职场文书
2015年教研员工作总结
2015/05/26 职场文书
预备党员表决心的话
2015/09/22 职场文书
班主任培训研修日志
2015/11/13 职场文书
公证书
2019/04/17 职场文书
Python答题卡识别并给出分数的实现代码
2021/06/22 Python
Win11 Beta 预览版 22621.575 和 22622.575更新补丁KB5016694发布(附更新内容大全)
2022/08/14 数码科技