如何用javascript/jquery循环遍历table？

Question

我有一段代码如下

<tbody class="society_list">
    <tr>
        <td>1</td>
        <td>Dummy</td>
        <td>Dummy</td>
        <td id="lol0">UPDATE THIS</td>
    </tr>
    <tr>
        .....
    </tr>
</tbody>

我想做的是遍历整个table，找到有id的td，得到那个id的值，然后更新里面的html。我现在有什么（对不起，我很新，我仍然不知道该做什么...）

function update(){
  var trs = document.querySelectorAll('.society_list tr');
  for(i=0;i<trs.length-1;i++){
    trs[i].find('td').each(function(){
      //I know I need to do something here but what's that.. 
    });
  }
}

Answer 1

如果您知道 id 属性，则不需要遍历 table。使用 jQuery 就这么简单：

$('#lol0').text('What you want');

或：

$('#lol0').html('What you want');

DEMO

Answer 2

朋友试试看

$('#tblOne > tbody  > tr').each(function() {...code...});

Answer 3

使用 has attribute selector.

遍历具有 id 属性的 tds

$('.society_list tr td[id]').each(function(){
  var tdID = $(this).attr('id'); // <--- getting the ID here
  var result = doSomeMagicWithId(tdID); // <--- doing something
  $(this).html(result);  // <---- updating the HTML inside the td
});

Answer 4

这是一个普通的 JavaScript 版本：

   var os=document.getElementsByTagName('td');
    for (var i=0;i<os.length;i++){
      var o=os[i];
      if (o.id){
        o.innerHTML="updated "+o.id;
      }
    }

我厌倦了说 jQuery 真的很简单的说法。在引擎盖下它仍然必须匹配所有 DOM 元素。某种形式的迭代仍在进行。普通 JavaScript 版本还不错，也没有隐藏复杂性。它可以在所有浏览器中运行，包括 jQuery 人们认为 "irrelevant".

的 IE 版本

Answer 5

function addRow(tableID,index) 
{
    var table = document.getElementById(tableID);
    var rowCount = table.rows.length;    
    
 var row = table.insertRow(rowCount);

 row.style.backgroundColor = "#FEF0FF";
 rowCount = rowCount-1;

 

 //row.id = "tr_add"+rowCount;
 var cell1   = row.insertCell(0);
 cell1.style.backgroundColor = "red";
 cell1.style.align ="center";
 var element1  = document.createElement("input");
 element1.id   = "chk"+(rowCount);
 element1.name   = "chk"+(rowCount);
 element1.type  = "checkbox";
 //element1.style.textAlign="center";
 var element111  = document.createElement("input");
 element111.id   = "chkbox"+(rowCount);
 element111.name = "chkbox"+(rowCount);
 element111.type = "hidden";
    
    var element112  = document.createElement("input");
 element112.id   = "textCopy"+(rowCount);
 element112.name = "textCopy"+(rowCount);
 element112.type = "hidden";
 element112.value ="COPY";
 //cell1.innerHTML = "COPY";
    
    cell1.appendChild(element1);
    cell1.appendChild(element111);
    cell1.appendChild(element112);
    cell1.style.textAlign="center";
    }

function addRow(tableID,index) 
{
    var table = document.getElementById(tableID);
    var rowCount = table.rows.length;    
    
 var row = table.insertRow(rowCount);

 row.style.backgroundColor = "#FEF0FF";
 rowCount = rowCount-1;

 

 //row.id = "tr_add"+rowCount;
 var cell1   = row.insertCell(0);
 //cell1.style.backgroundColor = "red";
 //cell1.style.align ="center";
 var element1  = document.createElement("input");
 element1.id   = "chk"+(rowCount);
 element1.name   = "chk"+(rowCount);
 element1.type  = "checkbox";
 //element1.style.textAlign="center";
 var element111  = document.createElement("input");
 element111.id   = "chkbox"+(rowCount);
 element111.name = "chkbox"+(rowCount);
 element111.type = "hidden";
    
    var element112  = document.createElement("input");
 element112.id   = "textCopy"+(rowCount);
 element112.name = "textCopy"+(rowCount);
 element112.type = "hidden";
 element112.value ="COPY";
 //cell1.innerHTML = "COPY";
    
    cell1.appendChild(element1);
    cell1.appendChild(element111);
    cell1.appendChild(element112);
    cell1.style.textAlign="center";
  
  document.getElementById('hdRowCount').value = rowCount+1;
    document.getElementById('btnCopy'+rowCount).onclick = function(){addRow('tableToModify',rowCount);}; 
  
    }

<table>
  <tr>
     <td>
       <button type="button" name="btnCopy<%=i%>" id="btnCopy<%=i%>" value="Copy" onclick="addRow('tableToModify','<%=i%>');">Copy</button>  
    
    </td>
  </tr>
</table>

如何用javascript/jquery循环遍历table？

How to use javascript/jquery to loop through table?

javascript

jquery

traversal