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 相关文章推荐
Javascript 作用域使用说明
Aug 13 Javascript
javascript 当前日期转化为中文的实现代码
May 13 Javascript
document.createElement()用法及注意事项(ff下不兼容)
Mar 13 Javascript
原生js拖拽(第一课 未兼容)拖拽思路
Mar 29 Javascript
常用的js验证和数据处理总结
Aug 02 Javascript
聊一聊jQuery插件uploadify使用方法
Aug 24 Javascript
如何给ss bash 写一个 WEB 端查看流量的页面
Mar 23 Javascript
微信小程序倒计时功能实现代码
Nov 09 Javascript
Vue.js 中的实用工具方法【推荐】
Jul 04 Javascript
js实现随机div颜色位置 类似满天星效果
Oct 24 Javascript
详解Vue中的watch和computed
Nov 09 Javascript
Vue如何实现验证码输入交互
Dec 07 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 命令行工具 shell_exec, exec, passthru, system详细使用介绍
2011/09/11 PHP
PHP+swoole实现简单多人在线聊天群发
2016/01/19 PHP
任意位置显示html菜单
2007/02/01 Javascript
input+select(multiple) 实现下拉框输入值
2009/05/21 Javascript
juqery 学习之五 文档处理 包裹、替换、删除、复制
2011/02/11 Javascript
jquery对dom的操作常用方法整理
2013/06/25 Javascript
js操作table示例(个人心得)
2013/11/29 Javascript
判断javascript的数据类型(示例代码)
2013/12/11 Javascript
javascript检查浏览器是否支持flash的实现代码
2014/08/14 Javascript
关于javascript模块加载技术的一些思考
2014/11/28 Javascript
JavaScript生成随机字符串的方法
2015/03/19 Javascript
JS实现控制表格内指定单元格内容对齐的方法
2015/03/30 Javascript
JS实现IE状态栏文字缩放效果代码
2015/10/24 Javascript
Javascript技术难点之apply,call与this之间的衔接
2015/12/04 Javascript
js简单判断移动端系统的方法
2016/02/25 Javascript
IE和Firefox之间在JavaScript语法上的差异
2016/04/22 Javascript
文件上传插件SWFUpload的使用指南
2016/11/29 Javascript
过期软件破解办法实例详解
2017/01/04 Javascript
JS遍历对象属性的方法示例
2017/01/10 Javascript
javascript设计模式之中介者模式学习笔记
2017/02/15 Javascript
Vue监听数组变化源码解析
2017/03/09 Javascript
利用VS Code开发你的第一个AngularJS 2应用程序
2017/12/15 Javascript
JavaScript 复制对象与Object.assign方法无法实现深复制
2018/11/02 Javascript
Python装饰器基础详解
2016/03/09 Python
终端命令查看TensorFlow版本号及路径的方法
2018/06/13 Python
对python实现模板生成脚本的方法详解
2019/01/30 Python
Django stark组件使用及原理详解
2019/08/22 Python
python主线程与子线程的结束顺序实例解析
2019/12/17 Python
python使用selenium爬虫知乎的方法示例
2020/10/28 Python
详解anaconda安装步骤
2020/11/23 Python
丝芙兰加拿大官方网站:SEPHORA加拿大
2018/11/20 全球购物
公司委托书格式范文
2014/04/04 职场文书
杭州黄龙洞导游词
2015/02/10 职场文书
三八妇女节寄语
2015/02/27 职场文书
2015年春训学习心得体会范文
2015/03/09 职场文书
企业宣传语大全
2015/07/13 职场文书