How to use javascript/jquery to loop through table?

Question

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

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
– 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
– Yiyue Wang, Commented Jul 14, 2015 at 3:05
then you can use the has attribute selector like $('.society_list td[id]') will return all td with id attribute — Arun P Johny
– Arun P Johny, Commented Jul 14, 2015 at 3:07

Dhiraj · Accepted Answer · 2015-07-14 03:13:42Z

6

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

edited Jul 14, 2015 at 3:13

answered Jul 14, 2015 at 3:04

Dhiraj

33.7k10 gold badges65 silver badges78 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Kevin Simple · Accepted Answer · 2015-07-14 03:04:13Z

1

mate try use

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

answered Jul 14, 2015 at 3:04

Kevin Simple

1,21312 silver badges22 bronze badges

Comments

Schien · Accepted Answer · 2015-07-14 03:09:37Z

1

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 complexity. And it runs in all browsers, including the IE versions that the jQuery folks deem "irrelevant".

edited Jul 14, 2015 at 3:09

answered Jul 14, 2015 at 3:04

Schien

3,9231 gold badge20 silver badges29 bronze badges

Comments

lmgonzalves · Accepted Answer · 2015-07-14 03:12:39Z

1

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

edited Jul 14, 2015 at 3:12

answered Jul 14, 2015 at 3:03

lmgonzalves

6,5883 gold badges24 silver badges43 bronze badges

2 Comments

Schien Over a year ago

The OP uses lol0 as one example. I suppose there are lol1, lol2, ... to follow. Maybe .each() is needed?

lmgonzalves Over a year ago

And it was clarified in comments, so the @downvote is not fair :(

Cherryishappy · Accepted Answer · 2015-07-14 04:06:35Z

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>

Collectives™ on Stack Overflow

How to use javascript/jquery to loop through table?

5 Answers 5

Comments

Comments

Comments

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Comments

Comments

Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related