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 相关文章推荐
Prototype的Class.create函数解析
Sep 22 Javascript
JS辨别访问浏览器判断是android还是ios系统
Aug 19 Javascript
js获取当前日期时间及其它操作汇总
Apr 17 Javascript
javascript自动恢复文本框点击清除后的默认文本
Jan 12 Javascript
JQuery ztree带筛选、异步加载实例讲解
Feb 25 Javascript
通过Tabs方法基于easyUI+bootstrap制作工作站
Mar 28 Javascript
RequireJS使用注意细节
May 15 Javascript
解决Vue页面固定滚动位置的处理办法
Jul 13 Javascript
让你5分钟掌握9个JavaScript小技巧
Jun 09 Javascript
JS实现的JSON序列化操作简单示例
Jul 02 Javascript
JavaScript数据结构与算法之检索算法实例分析【顺序查找、最大最小值、自组织查询】
Feb 22 Javascript
使用Layui搭建后台管理界面的操作方法
Sep 20 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
一个简单的自动发送邮件系统(三)
2006/10/09 PHP
windows xp下安装pear
2006/12/02 PHP
跟我学Laravel之路由
2014/10/15 PHP
PHP HTTP 认证实例详解
2016/11/03 PHP
JavaScript继承方式实例
2010/10/29 Javascript
jquery实现图片按比例缩放示例
2014/07/01 Javascript
深入理解JS函数的参数(arguments)的使用
2016/05/28 Javascript
JSONP原理及应用实例详解
2018/09/13 Javascript
深入浅析ng-bootstrap 组件集中 tabset 组件的实现分析
2019/07/19 Javascript
JS多个异步请求 按顺序执行next实现解析
2019/09/16 Javascript
vue quill editor 使用富文本添加上传音频功能
2020/01/14 Javascript
javascript实现评分功能
2020/06/24 Javascript
了不起的11个JavaScript代码重构最佳实践小结
2021/01/11 Javascript
[40:10]2015国际邀请赛全明星表演赛
2015/08/07 DOTA
Python使用正则匹配实现抓图代码分享
2015/04/02 Python
python结合opencv实现人脸检测与跟踪
2015/06/08 Python
PyQt5每天必学之布局管理
2018/04/19 Python
python人民币小写转大写辅助工具
2018/06/20 Python
解决Python二维数组赋值问题
2019/11/28 Python
pyinstaller打包成无控制台程序时运行出错(与popen冲突的解决方法)
2020/04/15 Python
Django实现后台上传并显示图片功能
2020/05/29 Python
python3.6.8 + pycharm + PyQt5 环境搭建的图文教程
2020/06/11 Python
Python基于network模块制作电影人物关系图
2020/06/19 Python
CSS3实现伪类hover离开时平滑过渡效果示例
2017/08/10 HTML / CSS
video结合canvas实现视频在线截图功能
2018/06/25 HTML / CSS
AmazeUI 面板的实现示例
2020/08/17 HTML / CSS
Kipling凯浦林美国官网:世界著名时尚休闲包袋品牌
2016/08/24 全球购物
俄罗斯最大的香水和化妆品网上商店:Randewoo
2020/11/05 全球购物
StringBuilder和String的区别
2015/05/18 面试题
施工资料员的岗位职责
2013/12/22 职场文书
《赠汪伦》教学反思
2014/04/12 职场文书
军人离婚协议书样本
2014/10/21 职场文书
2016年党员公开承诺书格式范文
2016/03/24 职场文书
ztree+ajax实现文件树下载功能
2021/05/18 Javascript
springboot利用redis、Redisson处理并发问题的操作
2021/06/18 Java/Android
基于PostgreSQL/openGauss 的分布式数据库解决方案
2021/12/06 PostgreSQL