Home >Web Front-end >JS Tutorial >Three ways to get tr td in JavaScript (graphic tutorial)

Three ways to get tr td in JavaScript (graphic tutorial)

亚连Original: 2018-05-19 09:39:584072browse

This article mainly introduces three ways to obtain tr td using JavaScript. You can check the detailed explanation below for the specific operation steps. Interested friends can refer to it.

/* The first one, native js, first get the table and then the tr tag, and then traverse the 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);
//       }
//       }

/* The jQuery way of writing, get the tr and then traverse all the td . Note that the value obtained by td is .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);
//      }
//    })

/* Native js obtains all rows, and then obtains each cell*/

//   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)
//   }

Summary:

$(this).children().eq(1).text() gets the displayed value

$(this).children(). eq(1).html() gets all the content between b6c5a531a458a2e790c1fd6421739d1cb90dd5946f0946207856a8a37f441edf

$('.trSelected',grid).find("td").eq( 7).text(); gets the content of a selected row

Set value: $('.trSelected',grid).find("td").eq(7).text(' 'Set content'')

xxx.innerHTML; is the value of the object obtained in js.

Traverse the table

$("#grid tr").each(function() {
().eq(1).text());
});

Use JavaScript to traverse

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);
    }
   }
  }

The above is what I compiled for everyone, I hope it will be helpful to everyone in the future.

Detailed explanation of the steps of the native JS encapsulation fade-in and fade-out effect function

JS generates a time list and outputs

angularjsDetailed explanation of custom caching use cases

The above is the detailed content of Three ways to get tr td in JavaScript (graphic tutorial). For more information, please follow other related articles on the PHP Chinese website!

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：Select all checkbox JavaScript writing (graphic tutorial)Next article：Select all checkbox JavaScript writing (graphic tutorial)

See more

Three ways to get tr td in JavaScript (graphic tutorial)

Detailed explanation of the steps of the native JS encapsulation fade-in and fade-out effect function

Related articles