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图片切换效果实现代码
Sep 24 Javascript
javascript测试题练习代码
Oct 10 Javascript
编写自己的jQuery提示框(Tip)插件
Feb 05 Javascript
jQuery实现点击按钮弹出可关闭层的浮动层插件
Sep 19 Javascript
js图片跟随鼠标移动代码
Nov 26 Javascript
D3.js实现雷达图的方法详解
Sep 22 Javascript
Angular1.x复杂指令实例详解
Mar 01 Javascript
使用jquery datatable和bootsrap创建表格实例代码
Mar 17 Javascript
微信小程序点击控件修改样式实例详解
Jul 07 Javascript
AngularJS使用ui-route实现多层嵌套路由的示例
Jan 10 Javascript
vue项目中axios使用详解
Feb 07 Javascript
详解vue之自行实现派发与广播(dispatch与broadcast)
Jan 19 Vue.js
全面解析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与XML的PDF文档生成技术
2006/10/09 PHP
基于OpenCV的PHP图像人脸识别技术
2009/10/11 PHP
Zend Framework实现具有基本功能的留言本(附demo源码下载)
2016/03/22 PHP
PHP实现webshell扫描文件木马的方法
2017/07/31 PHP
laravel 字段格式化 modle 字段类型转换方法
2019/09/30 PHP
JavaScript中Math对象使用说明
2008/01/16 Javascript
JavaScript 应用类库代码
2008/06/02 Javascript
Jquery ThickBox插件使用心得(不建议使用)
2010/09/08 Javascript
JQuery datepicker 使用方法
2011/05/20 Javascript
jQuery EasyUI datagrid实现本地分页的方法
2015/02/13 Javascript
jQuery实现鼠标划过修改样式的方法
2015/04/14 Javascript
nodejs导出excel的方法
2015/06/30 NodeJs
jquery仅用6行代码实现滑动门效果
2015/09/07 Javascript
JS实现消息来时让网页标题闪动效果的方法
2016/04/20 Javascript
使用AJAX实现Web页面进度条的实例分享
2016/05/06 Javascript
Javascript点击按钮随机改变数字与其颜色
2016/09/01 Javascript
js转html实体的方法
2016/09/27 Javascript
浅谈Node.js 沙箱环境
2018/05/15 Javascript
nest.js 使用express需要提供多个静态目录的操作方法
2019/10/24 Javascript
Python实现远程调用MetaSploit的方法
2014/08/22 Python
Python3匿名函数用法示例
2018/07/25 Python
浅析Python 3 字符串中的 STR 和 Bytes 有什么区别
2018/10/14 Python
python 多线程对post请求服务器测试并发的方法
2019/06/13 Python
django之状态保持-使用redis存储session的例子
2019/07/28 Python
python中添加模块导入路径的方法
2021/02/03 Python
保护母亲河倡议书
2014/04/14 职场文书
会议欢迎标语
2014/06/30 职场文书
关于读书的演讲稿300字
2014/08/27 职场文书
运动会广播稿200字
2014/10/18 职场文书
清洁工个人总结
2015/03/04 职场文书
2015年绩效考核工作总结
2015/05/23 职场文书
学习心理学心得体会
2016/01/22 职场文书
利用Python网络爬虫爬取各大音乐评论的代码
2021/04/13 Python
关于Python使用turtle库画任意图的问题
2022/04/01 Python
MyBatis在注解上使用动态SQL方式(@select使用if)
2022/07/07 Java/Android
详解apache编译安装httpd-2.4.54及三种风格的init程序特点和区别
2022/07/15 Servers