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 26 Javascript
javascript 控制input只允许输入的各种指定内容
Jun 19 Javascript
简述AngularJS的控制器的使用
Jun 16 Javascript
CSS中position属性之fixed实现div居中
Dec 14 Javascript
jquery点击展示与隐藏更多内容
Dec 03 Javascript
react-native使用react-navigation进行页面跳转导航的示例
Sep 07 Javascript
AngularJS的$location使用方法详解
Oct 19 Javascript
js 下拉菜单点击旁边收起实现(踩坑记)
Sep 29 Javascript
js键盘事件实现人物的行走
Jan 17 Javascript
Node.js API详解之 timer模块用法实例分析
May 07 Javascript
js实现弹幕飞机效果
Aug 27 Javascript
Javascript使用integrity属性进行安全验证
Nov 07 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 手机归属地查询 api
2010/02/08 PHP
PHP 数组基础知识小结
2010/08/20 PHP
php实现约瑟夫问题的方法小结
2015/03/23 PHP
php使用pear_smtp发送邮件
2016/04/15 PHP
JavaScript 继承详解(三)
2009/07/13 Javascript
javascript面向对象快速入门实例
2015/01/13 Javascript
JS实现同时搜索百度和必应的方法
2015/01/27 Javascript
JavaScript中的ParseInt(&quot;08&quot;)和“09”返回0的原因分析及解决办法
2016/05/19 Javascript
JavaScript简单获取系统当前时间完整示例
2016/08/02 Javascript
Node.js 日志处理模块log4js
2016/08/28 Javascript
学好js,这些js函数概念一定要知道【推荐】
2017/01/19 Javascript
浅谈webpack打包之后的文件过大的解决方法
2018/03/07 Javascript
详解Node.js一行命令上传本地文件到服务器
2019/04/22 Javascript
js实现点击图片在屏幕中间弹出放大效果
2019/09/11 Javascript
使用Layui搭建后台管理界面的操作方法
2019/09/20 Javascript
在vue中高德地图引入和轨迹的绘制的实现
2019/10/11 Javascript
原生js实现点击按钮复制内容到剪切板
2020/11/19 Javascript
高性能web服务器框架Tornado简单实现restful接口及开发实例
2014/07/16 Python
Python生成pdf文件的方法
2014/08/04 Python
Python提示[Errno 32]Broken pipe导致线程crash错误解决方法
2014/11/19 Python
Python多进程通信Queue、Pipe、Value、Array实例
2014/11/21 Python
Python ldap实现登录实例代码
2016/09/30 Python
python-opencv 将连续图片写成视频格式的方法
2019/01/08 Python
python+openCV利用摄像头实现人员活动检测
2019/06/22 Python
Mac 使用python3的matplot画图不显示的解决
2019/11/23 Python
python爬虫利用代理池更换IP的方法步骤
2021/02/21 Python
美国在线和移动免费会员制批发零售商:Boxed(移动端的Costco)
2020/01/02 全球购物
澳大利亚排名第一的露营和户外设备在线零售商:Outbax
2020/05/06 全球购物
大学生志愿者感言
2014/01/15 职场文书
敬老月活动总结
2014/08/28 职场文书
导游词之千岛湖
2019/09/23 职场文书
导游词之唐山景点
2019/12/18 职场文书
《分一些蚊子进来》读后感3篇
2020/01/09 职场文书
Win10 最新稳定版本 21H2开始推送
2022/04/19 数码科技
微信小程序 根据不同用户切换不同TabBar
2022/04/21 Javascript
MySQL中dd::columns表结构转table过程及应用详解
2022/09/23 MySQL