I have a block of code like below

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

What I want to do is to loop through the whole table, find the td with an id, get the value of that id, and then update the html inside. What I have for now(Sorry I'm quite new and I still don't have much idea what to do...)

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

I have a block of code like below

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

What I want to do is to loop through the whole table, find the td with an id, get the value of that id, and then update the html inside. What I have for now(Sorry I'm quite new and I still don't have much idea what to do...)

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

• javascript
• jquery
• traversal

• 2 If you know the id of the target element then there is no need to loop, you could just use the id selector to get the element then update the content – Arun P Johny Commented Jul 14, 2015 at 3:03
• @ArunPJohny Hmm.. Since the id is actually set using another javascript, so I don't quite know what the id is. What I wanna do is to loop through the tds and find one with an id, get the id value and use it to do something.. – Yiyue Wang Commented Jul 14, 2015 at 3:05
• 1 then you can use the has attribute selector like $('.society_list td[id]') will return all td with id attribute – Arun P Johny Commented Jul 14, 2015 at 3:07

5 Answers 5

Iterate through tds which have id attribute using the has attribute selector.

$('.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...});

Here's a plain JavaScript version:

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

I'm tired of the argument that jQuery is really simple. Well under the hood it still has to match all the DOM elements. Some form of iteration still takes place. The plain JavaScript version isn't so bad and it doesn't HIDE plexity. And it runs in all browsers, including the IE versions that the jQuery folks deem "irrelevant".

If you know the id attribute, you don't need to loop through table. With jQuery it's so simple:

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

OR:

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

DEMO

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>