JavaScript获取tr td 的三种方式全面总结（推荐）

/* 第一种，原生的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);
    }
   }
  }

以上就是这篇文章的全部内容了，希望本文的内容对大家的学习或者工作能带来一定的帮助~如果有疑问大家可以留言交流，谢谢大家对我们的支持!

赞 (0)

相关推荐

  • js遍历td tr等html元素

    复制代码 代码如下: function checkuser(obj) { var obj = window.event.srcElement; var row = obj.parentElement.parentElement; var value = row.cells[0].all[0].value; var item = value.split("|"); alert(item); if (item.length > 1) { if (item[0] == "or

  • JS动态创建Table,Tr,Td并赋值的具体实现

    成果库修改:      要求主题列表随成果类型改变而改变      网上查询资料后开工,在成果类型下拉框添加change()事件触发Dwr,查询主题集合--动态创建/编辑Table      概要代码如下:JS  复制代码 代码如下: //动态获取主题数据 function getzts(){     parentId = document.getElementById("bselect1").value;     if(parentId!=""){        

  • js使用for循环与innerHTML获取选中tr下td值

    function getParentEl (el, tagName) { if (!el) return el; do { el = el.parentNode; } while(el && el.tagName !== tagName); return el; } function temp(){ //得到选中row的value值 var temp=document.getElementsByName('id'); for(var i=0;i<temp.length;i++){ i

  • JS动态添加Table的TR，TD实现方法

    本文实例讲述了JS动态添加Table的TR,TD实现方法.分享给大家供大家参考.具体实现方法如下: 复制代码 代码如下: <html>  <head> <title></title> <SCRIPT language="JavaScript"> var tempRow=0; var maxRows=0; function insertRows(){ tempRow=table1.rows.length-1; maxRows=t

  • js中获取 table节点各tr及td的内容简单实例

    <table id="tb1" width="200" border="1" cellpadding="4" cellspacing="0"> <tr> <td height="25">第一行</td> </tr> <tr> <td height="25">第二行</td>

  • jsp跳转getRequestDispatcher()和sendRedirect()的区别

    1.request.getRequestDispatcher()是请求转发,前后页面共享一个request ;response.sendRedirect()是重新定向,前后页面不是一个request. 2.RequestDispatcher.forward()是在服务器端运行;HttpServletResponse.sendRedirect()是通过向客户浏览器发送命令来完成.所以RequestDispatcher.forward()对于浏览器来说是"透明的":而HttpServlet

  • JavaScript获取tr td 的三种方式全面总结（推荐）

    /* 第一种,原生的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+

  • Action获取请求参数的三种方式

    Action获取请求参数的三种方式

    方式一:Action本身作为Model对象,通过属性注入(Setter)方法讲参数数据封装到Action中 具体为:在Action中,提供和参数名相同的几个属性,并为其提供set方法,那么,该参数会被自动封装 到该几个属性中. 方式二:创建独立的Model对象,还是通过属性注入的方法将请求数据封装到Model对象中 具体为:另外创建一个专门的类,并在其中添加几个和请求参数名相同的属性,,此时,在表单中,需要讲参数名, 写成Model的一个具体对象名.参数名的方式,然后在Action中,需要定义一

  • JavaScript模拟实现封装的三种方式及写法区别

    前  言   继承是使用一个子类继承另一个父类,那么子类可以自动拥有父类中的所有属性和方法,这个过程叫做继承!  JS中有很多实现继承的方法,今天我给大家介绍其中的三种吧. 1.在 Object类上增加一个扩展方法 //声明一个父类 function Person(name){ this.name=name; this.age=age; this.say=function(){ alert("我叫"+this.name); } } //声明一个子类 function Student()

  • JavaScript常用截取字符串的三种方式用法区别实例解析

    stringObject.substring(start,stop) 用于提取字符串中介于两个指定下标之间的字符. start必需.一个非负的整数,规定要提取的子串的第一个字符在 stringObject 中的位置. stop可选.一个非负的整数,比要提取的子串的最后一个字符在 stringObject 中的位置多 1.如果省略该参数,那么返回的子串会一直到字符串的结尾. start从0开始 到stop(不包含stop)结束 不接受负的参数. stringObject.substr(start,

  • C++获取文件大小数值的三种方式介绍

    目录 方式一 方式二 方式三 总结 方式一 推荐使用此方式获得文件大小! C/C++.Window.Linux 环境都可以使用! 通过结构体struct stat获得. 需要包含头文件:#include <sys/stat.h> // struct stat // 通过stat结构体 获得文件大小,单位字节 size_t getFileSize1(const char *fileName) { if (fileName == NULL) { return 0; } // 这是一个存储文件(夹)

  • JavaScript中绑定事件的三种方式及去除绑定

    在JavaScript中,有三种常用的绑定事件的方法 第一种办法 函数写在结构层里面 非常不好,使页面很混乱,行为与结构得不到分离 <input type="button" onclick="func();"> 绑定事件的第二种办法 好处:行为与结构开始分离 缺点: 第二种绑定方式中只能给一个时间绑定一个处理函数 即.onclick = fn1;  .  onclick = fn2 最终的效果是onclick = fn2 <select name=

  • Android获取view高度的三种方式

    本文为大家分享了Android获取view高度的方法,供大家参考,具体内容如下 getMeasuredHeight()与getHeight的区别 实际上在当屏幕可以包裹内容的时候,他们的值相等, 只有当view超出屏幕后,才能看出他们的区别: getMeasuredHeight()是实际View的大小,与屏幕无关, 而getHeight的大小此时则是屏幕的大小. 当超出屏幕后,getMeasuredHeight()等于getHeight()加上屏幕之外没有显示的大小 具体方法 我们知道在oncr

  • 详解JavaScript实现JS弹窗的三种方式

    详解JavaScript实现JS弹窗的三种方式

    目录 一.前言 二.什么是JavaScript,有什么用? 三.HTML嵌入JavaScript的方式: 第一种方式: 第二种方式: 第三种方式: 总结 一.前言 html和css的学习大致完成,我们进入重要的JavaScript学习阶段 二.什么是JavaScript,有什么用? Javascript是运行在浏览器上的脚本语言.简称JS. 他的出现让原来静态的页面动起来了,更加的生动. 三.HTML嵌入JavaScript的方式: 第一种方式: 1.要实现的功能: 用户点击以下按钮,弹出消息框

  • JavaScript弹出对话框的三种方式

    JavaScript弹出对话框的三种方式

    学习过js的小伙伴会发现,我们在一些实例中用到了alert()方法.prompt()方法.prompt()方法,他们都是在屏幕上弹出一个对话框,并且在上面显示括号内的内容,使用这种方法使得页面的交互性更精彩,实际上我们经常会在进行网页浏览时简单这种类型的对话框,在用户与应用程序进行双向交流时,经常要用到对话框. javascript的三种对话框是通过调用window对象的三个方法alert(),confirm()和prompt()来获得,可以利用这些对话框来完成js的输入和输出,实现与用户能进行

  • JavaScript中清空数组的三种方式

    方式1,splice var ary = [1,2,3,4]; ary.splice(0,ary.length); console.log(ary); // 输出 [],空数组,即被清空了 方式2,length赋值为0 这种方式很有意思,其它语言如Java,其数组的length是只读的,不能被赋值.如 int[] ary = {1,2,3,4}; ary.length = 0; Java中会报错,编译通不过. 而JS中则可以,且将数组清空了,如 var ary = [1,2,3,4]; ary.

随机推荐