CODEWITHSUNDEEP
javascriptjquerytraversal
Yiyue Wang
Yiyue Wang

Reputation: 152

How to use javascript/jquery to loop through table?

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

Upvotes: 0

Views: 2610

Answers (5)

Cherryishappy
Cherryishappy

Reputation: 160

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>

Upvotes: 0

Dhiraj
Dhiraj

Reputation: 33618

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

Upvotes: 6

lmgonzalves
lmgonzalves

Reputation: 6588

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

Upvotes: 1

Schien
Schien

Reputation: 3903

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".

Upvotes: 1

Kevin Simple
Kevin Simple

Reputation: 1213

mate try use

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

Upvotes: 1

Related Questions