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 实现类的多种方法实例
May 01 Javascript
JavaScript控制listbox列表框的项目上下移动的方法
Mar 18 Javascript
通过js获取上传的图片信息(临时保存路径,名称,大小)然后通过ajax传递给后端的方法
Oct 01 Javascript
20分钟轻松创建自己的Bootstrap站点
May 12 Javascript
JS小数运算出现多为小数问题的解决方法
Jun 02 Javascript
Vue组件开发初探
Feb 14 Javascript
Vue组件模板形式实现对象数组数据循环为树形结构(实例代码)
Jul 31 Javascript
two.js之实现动画效果示例
Nov 06 Javascript
浅谈在vue中用webpack打包之后运行文件的问题以及相关配置方法
Feb 21 Javascript
JS动态插入脚本和插入引用外部链接脚本的方法
May 21 Javascript
解决vue js IOS H5focus无法自动弹出键盘的问题
Aug 30 Javascript
Vue+axios+WebApi+NPOI导出Excel文件实例方法
Jun 05 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缩小png图片不损失透明色的解决方法
2013/12/25 PHP
php中static和const关键字用法分析
2016/12/07 PHP
ThinkPHP 3.2.3实现页面静态化功能的方法详解
2017/08/03 PHP
ajax+php实现无刷新验证手机号的实例
2017/12/22 PHP
深入认识JavaScript中的函数
2007/01/22 Javascript
比较详细的javascript对象的property和prototype是什么一种关系
2007/08/06 Javascript
JS对外部文件的加载及对IFRMAME的加载的实现,当加载完成后,指定指向方法(方法回调)
2011/07/04 Javascript
js屏蔽鼠标键盘(右键/Ctrl+N/Shift+F10/F11/F5刷新/退格键)
2013/01/24 Javascript
javascript实现可改变滚动方向的无缝滚动实例
2013/06/17 Javascript
JavaScript中的函数(二)
2015/12/23 Javascript
微信小程序 加载 app-service.js 错误解决方法
2016/10/12 Javascript
微信小程序 简单DEMO布局,逻辑,样式的练习
2016/11/30 Javascript
详解jQuery选择器
2016/12/21 Javascript
Angularjs实现分页和分页算法的示例代码
2016/12/23 Javascript
Vue.js使用$.ajax和vue-resource实现OAuth的注册、登录、注销和API调用
2017/05/10 Javascript
javascript中mouseenter与mouseover的异同
2017/06/06 Javascript
解决vue中使用swiper插件问题及swiper在vue中的用法
2018/04/04 Javascript
JavaScript canvas绘制圆弧与圆形
2020/02/18 Javascript
python3抓取中文网页的方法
2015/07/28 Python
Python实现图片尺寸缩放脚本
2018/03/10 Python
数据清洗--DataFrame中的空值处理方法
2018/07/03 Python
Python设计模式之外观模式实例详解
2019/01/17 Python
什么是Python包的循环导入
2020/09/08 Python
selenium框架中driver.close()和driver.quit()关闭浏览器
2020/12/08 Python
巴西女装购物网站:Eclectic
2018/04/24 全球购物
Zatchels官网:英国剑桥包品牌
2021/01/12 全球购物
毕业生机械建模求职信
2013/10/14 职场文书
军训自我鉴定怎么写
2014/02/13 职场文书
2014大学校园光棍节活动策划书
2014/09/29 职场文书
2014年平安夜寄语
2014/12/08 职场文书
酒店辞职信怎么写
2015/02/27 职场文书
面试通知短信
2015/04/20 职场文书
发票退票证明
2015/06/24 职场文书
2016年三八节红领巾广播稿
2015/12/17 职场文书
JavaScript流程控制(循环)
2021/12/06 Javascript
SQL Server中的逻辑函数介绍
2022/05/25 SQL Server