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去空格处理方法
Nov 18 Javascript
javascript 常用代码技巧大收集
Feb 25 Javascript
JS面向对象编程浅析
Aug 28 Javascript
查看源码的工具 学习jQuery源码不错的工具
Dec 26 Javascript
查看大图功能代码jquery版
Nov 05 Javascript
原生javascript实现Tab选项卡切换功能
Jan 12 Javascript
Javascript中的getUTCDay()方法使用详解
Jun 10 Javascript
CSS或者JS实现鼠标悬停显示另一元素
Jan 22 Javascript
详解Vue爬坑之vuex初识
Jun 14 Javascript
ionic选择多张图片上传的示例代码
Oct 10 Javascript
Promise.all中对于reject的处理方法
Aug 01 Javascript
JS/HTML5游戏常用算法之碰撞检测 包围盒检测算法详解【凹多边形的分离轴检测算法】
Dec 13 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上传图片重命名的6种解决方法的详细介绍
2013/04/28 PHP
thinkphp autoload 命名空间自定义 namespace
2015/07/17 PHP
js之WEB开发调试利器:Firebug 下载
2007/01/13 Javascript
支持ie与FireFox的剪切板操作代码
2009/09/28 Javascript
jQuery的deferred对象使用详解
2011/08/20 Javascript
jQuery 拖动层(在可视区域范围内)
2012/05/24 Javascript
仿谷歌主页js动画效果实现代码
2013/07/14 Javascript
javascript 中that的含义示例介绍
2014/05/14 Javascript
JS中三目运算符和if else的区别分析与示例
2014/11/21 Javascript
Angular 4 指令快速入门教程
2017/06/07 Javascript
深入解析nodejs HTTP服务
2017/07/25 NodeJs
angular2路由切换改变页面title的示例代码
2017/08/23 Javascript
详解Vue单元测试Karma+Mocha学习笔记
2018/01/31 Javascript
JavaScript面向对象程序设计创建对象的方法分析
2018/08/13 Javascript
vue实现的组件兄弟间通信功能示例
2018/12/04 Javascript
微信小程序非swiper组件实现的自定义伪3D轮播图效果示例
2018/12/11 Javascript
修改vue源码实现动态路由缓存的方法
2020/01/21 Javascript
如何基于js判断浏览器版本
2020/02/20 Javascript
[54:25]Ti4 循环赛第三日LGD vs MOUZ
2014/07/12 DOTA
[00:35]TI7不朽珍藏III——寒冰飞龙不朽展示
2017/07/15 DOTA
Python OS模块常用函数说明
2015/05/23 Python
python可视化实现代码
2019/01/15 Python
Python如何获得百度统计API的数据并发送邮件示例代码
2019/01/27 Python
关于pytorch处理类别不平衡的问题
2019/12/31 Python
Python中格式化字符串的四种实现
2020/05/26 Python
使用css3制作登录表单的步骤
2014/04/07 HTML / CSS
详解Html5 监听拦截Android返回键方法
2018/04/18 HTML / CSS
压铸汽车模型收藏家:Diecastmodelswholesale.com
2016/12/21 全球购物
一道Delphi上机题
2012/06/04 面试题
会计专业自我鉴定范文
2013/10/06 职场文书
学习党章思想汇报
2014/01/07 职场文书
基层党组织公开承诺书
2014/03/28 职场文书
离婚协议书标准格式
2014/10/04 职场文书
初中生思想道德自我评价
2015/03/09 职场文书
2015秋季幼儿园开学通知
2015/07/16 职场文书
小学六年级班主任工作经验交流材料
2015/11/02 职场文书