如何使用javascript/jquery循环通过表

How to use javascript/jquery to loop through table?

本文关键字：循环 jquery 何使用 javascript      更新时间：2023-09-26

我有一个像下面这样的代码块

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

我想做的是遍历整个表，找到带有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.. 
    });
  }
}

使用has属性选择器遍历具有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
});

mate try use

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

这是一个纯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开发者认为"无关紧要"的IE版本。

如果您知道id属性，则不需要遍历表。使用jQuery非常简单:

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

或:

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


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>

相关文章：