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 相关文章推荐
JQuery里选择超链接的实现代码
May 22 Javascript
jQuery获取CSS样式中的颜色值的问题,不同浏览器格式不同的解决办法
May 13 Javascript
浅析jquery ajax异步调用方法中不能给全局变量赋值的原因及解决方法
Jan 10 Javascript
ECMAScript6函数剩余参数(Rest Parameters)
Jun 12 Javascript
JS实现点击登录弹出窗口同时背景色渐变动画效果
Mar 25 Javascript
AngularJS入门教程之Select(选择框)详解
Jul 27 Javascript
ES6新特性四:变量的解构赋值实例
Apr 21 Javascript
JS获取日期的方法实例【昨天,今天,明天,前n天,后n天的日期】
Sep 28 Javascript
js注册时输入合法性验证方法
Oct 21 Javascript
vue实现a标签点击高亮方法
Mar 17 Javascript
Vue组件内部实现一个双向数据绑定的实例代码
Apr 04 Javascript
jQuery - AJAX load() 实例用法详解
Aug 27 jQuery
全面解析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程序
2006/10/09 PHP
PHP 自动加载的简单实现(推荐)
2016/08/12 PHP
ThinkPhP+Apache+PHPstorm整合框架流程图解
2020/11/23 PHP
深入Javascript函数、递归与闭包(执行环境、变量对象与作用域链)使用详解
2013/05/08 Javascript
js固定DIV高度,超出部分自动添加滚动条的简单方法
2013/07/10 Javascript
JavaScript中setAttribute用法介绍
2013/07/20 Javascript
给事件响应函数传参数的四种方式小结
2013/12/05 Javascript
js 对小数加法精度处理示例说明
2013/12/27 Javascript
javaScript中两个等于号和三个等于号之间的区别介绍
2014/06/27 Javascript
jQuery+Ajax+PHP弹出层异步登录效果(附源码下载)
2016/05/27 Javascript
浅谈jQuery添加的HTML,JS失效的问题
2016/10/05 Javascript
AngularJS辅助库browserTrigger用法示例
2016/11/03 Javascript
JS日程管理插件FullCalendar中文说明文档
2017/02/06 Javascript
关于使用js算总价的问题
2017/06/23 Javascript
Angular.js中数组操作的方法教程
2017/07/31 Javascript
浅谈vue中数据双向绑定的实现原理
2017/09/14 Javascript
vue实现登陆登出的实现示例
2017/09/15 Javascript
解决vue中无法动态修改jqgrid组件 url地址的问题
2018/03/01 Javascript
Webpack 4.x搭建react开发环境的方法步骤
2018/08/15 Javascript
JS中验证整数和小数的正则表达式
2018/10/08 Javascript
通过JavaScript下载文件到本地的方法(单文件)
2019/03/17 Javascript
JS实现导航栏楼层特效
2020/01/01 Javascript
js Math数学简单使用操作示例
2020/03/13 Javascript
vscode 配置vue+vetur+eslint+prettier自动格式化功能
2020/03/23 Javascript
使用vue构建多页面应用的示例
2020/10/22 Javascript
[03:57]DOTA2英雄梦之声_第03期_幻影刺客
2014/06/21 DOTA
Python调用微信公众平台接口操作示例
2017/07/08 Python
Python之dict(或对象)与json之间的互相转化实例
2018/06/05 Python
面向中国市场的在线海淘美妆零售网站:Beauty House美丽屋
2021/03/02 全球购物
异步传递消息系统的作用
2016/05/01 面试题
展会邀请函范文
2014/01/26 职场文书
数学国培研修感言
2014/02/13 职场文书
学校党支部公开承诺书
2015/04/30 职场文书
《我要的是葫芦》教学反思
2016/02/18 职场文书
企业管理不到位检讨书
2019/06/27 职场文书
Win11右下角图标点了没反应怎么办?Win11点击右下角图标无反应解决方法汇总
2022/07/07 数码科技