Change innerHTML in all <td> rows

Question

How to change innerHTML in all rows?

This script only changes innerHTML in first row.

 <table> <tr><td id="X">0</td></tr> <tr><td id="X">0</td></tr> </table> <script> if (document.getElementById("X").innerHTML == 0) { document.getElementById('X').innerHTML = '1'; } </script> 

Answer 1

You should use class attribute, not id . You should have unique ids of your elements on page.

So it should be like:

<table>
  <tr>
    <td class="X">0</td>
  </tr>
  <tr>
    <td class="X">0</td>
  </tr>
</table>
<script>
var els = document.getElementsByClassName("X");

for (var i = 0; i < els.length; i++) {
  els[i].innerHTML = '1';
}
</script>

Here is JsFiddle

Answer 2

You shouldnt use id. id should be unique. Use class instead.

 <table> <tr><td class="X">0</td></tr> <tr><td class="X">0</td></tr> </table> <script> var tds = document.getElementsByClassName("X"); for(var i = 0; i < tds.length; i++) { tds[i].innerHTML = "1"; } </script> 

Answer 3

Replace this script and check,

<script>
var tableRow = document.getElementsByTagName('td');
for(var i=0; i< tableRow.length; i++){
//Your logic here
tableRow[i].innerHTML = 1;
}
</script>

Working Fiddle: https://jsfiddle.net/u4g2L8b6/

Answer 4

Don't use id for multiple selector .Try with querySelectorAll() and forEach for iterate the element one bye one .For more specific you could use classname

 document.querySelectorAll('tr td').forEach(function(a){ a.innerHTML = a.innerHTML.trim() == '0'?'1': a.innerHTML; }) 

 <table> <tr><td id="X" >0</td></tr> <tr><td id="X" >0</td></tr> </table> 

Answer 5

Id should be unique, Use like this

 var tds = document.querySelectorAll("#X td"); for (var prop in tds) { if(tds[prop].innerHTML == "0"){ tds[prop].innerHTML = "1" } } 

 Before <table border="1" width="100px"> <tr><td>0</td></tr> <tr><td>0</td></tr> </table> After <table id="X" border="1" width="100px"> <tr><td>0</td></tr> <tr><td>0</td></tr> </table> 

Answer 6

First of all you should not give same 'id' attribute multiple time in DOM. Bad practice. you can assign same 'class' instead.

But even if this is the set elements with you then using following code will solve your problem

var tdList = document.getElementsByTagName('td');
for(var i=0; i< tdList.length; i++){ 
  if(tdList[i].innerHTML.trim()=='0' && tdList[i].getAttribute('id') == "X")
  tdList[i].innerHTML = '1' 
}

Answer 7

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> <table> <tr><td id="X">0</td></tr> <tr><td id="X">0</td></tr> </table> <script> get_item = document.querySelectorAll("#X"); for (var i in get_item) { if(get_item[i].innerHTML == "0"){ get_item[i].innerHTML = "1" } } </script> 

Answer 8

Solution to < > <= =>

 <table> <tr><td id="X">9</td></tr> <tr><td id="X">10</td></tr> <tr><td id="X">11</td></tr> </table> <script> var tdList = document.getElementsByTagName('td'); for(var i=0; i< tdList.length; i++){ if(parseInt(tdList[i].innerHTML.trim())<'10' && tdList[i].getAttribute('id') == "X") tdList[i].innerHTML = 'Answer is here' } </script>