Rumah >hujung hadapan web >tutorial js >有关JavaScript获取tr td方法总结

有关JavaScript获取tr td方法总结

巴扎黑asal: 2017-08-17 15:59:471900semak imbas

这篇文章主要介绍了JavaScript获取tr td 的三种方式,具体操作步骤大家可查看下文详细讲解,感兴趣的小伙伴们可以参考一下。

/* 第一种，原生的js，先获取table然后获取tr标签，然后遍历td */

//     $(&#39;#selectIds&#39;).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){
//         $(&#39;#selectIds&#39;).val($(&#39;#selectIds&#39;).val() + "" + idtext); 
//       }else{
//         $(&#39;#selectIds&#39;).val($(&#39;#selectIds&#39;).val() + "," + idtext);
//       }
//       }

/* jQuery的写法，获取到tr然后遍历所有的td。注意td获取值是.text(); */

//   $(&#39;#selectIds&#39;).val("");
//   var isFirst = true;
//    $("#tb_table").find("tr").each(function(){
//      var tdArr = $(this).children();
//      var idtext = tdArr.eq(1).text();
//      if(idtext != &#39;人员ID&#39;){
//        if(isFirst){
//        $(&#39;#selectIds&#39;).val($(&#39;#selectIds&#39;).val() + "" + idtext); 
//        isFirst = false
//        }else{
//          $(&#39;#selectIds&#39;).val($(&#39;#selectIds&#39;).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()获取的是b6c5a531a458a2e790c1fd6421739d1cb90dd5946f0946207856a8a37f441edf之间的所有内容

$('.trSelected',grid).find("td").eq(7).text();获取的是选中的某行的内容

设置值：$('.trSelected',grid).find("td").eq(7).text(‘'设置内容‘')

xxx.innerHTML; 是js里面获取对象的值。

遍历表

$("#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);
    }
   }
  }

Atas ialah kandungan terperinci 有关JavaScript获取tr td方法总结. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan：

Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

Artikel sebelumnya：使用bootstrap modal+gridview弹出框效果实现实例教程Artikel seterusnya：详细介绍JavaScript移动端事件的基础及对常用事件库的总结

Artikel berkaitan

Lihat lagi