Unable to update HTML table with JavaScript using innerHTML

Question

I am a beginner in JavaScript and I would like to print some text out of my table by using .innerHTML but it doesn't work. Here's the code:

<table style="width:100%">
    <tr>
        <td id="tr">&nbsp;</td>
        <td id="tr1">&nbsp;</td>
        <td id="tr2">&nbsp;</td>
    </tr>
    <tr>
       <td id="tr3">&nbsp;</td>
       <td id="tr4">&nbsp;</td>
       <td id="tr5">&nbsp;</td>
    </tr>
    <tr>
       <td id="tr6">&nbsp;</td>
       <td id="tr7">&nbsp;</td>
       <td id="tr8">&nbsp;</td>
    </tr>
</table>

<script>
document.getElementById("tr").innerHTML = "some text";
document.getElementById("tr2").innerHTML = "some text1";
document.getElementById("tr2").innerHTML = "some text2";
document.getElementById("tr3").innerHTML = "some text3";
document.getElementById("tr4").innerHTML = "some text4";
document.getElementById("tr5").innerHTML = "some text5";
document.getElementById("tr7").innerHTML = "some text6";
document.getElementById("tr8").innerHTML = "some text7";
document.getElementById("tr9").innerHTML = "some text8";
</script>

You're fetching tr2 twice, skipping tr1 and tr6, and there is no tr9 element ID. Aside from that, I see no issues. What does "doesn't work" mean? — user1106925
– user1106925, Commented Mar 19, 2016 at 20:43
Seems to work fine in this fiddle when fixing the issue mentioned in the above comment. — GillesC
– GillesC, Commented Mar 19, 2016 at 20:46
Which browser are you using, except that you missed tr1, tr6 and you have non-existing tr9 you can also try to convert <script> tag into <script type="text/javascript"> — stjepano
– stjepano, Commented Mar 19, 2016 at 22:16

Robin Van den Broeck · Accepted Answer · 2016-03-19 20:47:47Z

1

You missed tr6, and tr9 doesn't exist. Here is a link to a working snapshot of your code.
However, I would recommend you to look up how loops work.

answered Mar 19, 2016 at 20:47

Robin Van den Broeck

1,6784 gold badges15 silver badges19 bronze badges

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

Comments

zer00ne · Accepted Answer · 2016-03-20 00:25:28Z

1

This demo uses a forloop to iterate through a NodeList of <td>s and assign each <td> a string.

Read:

querySelectorAll()

Loops and Iteration

NodeList

// Create an array of strings.
// Each string represents what will be in each cell
var content = ['row 1 col 1', 'row 1 col 2', 'row 1 col 3', 'row 2 col 1', 'row 2 col 2', 'row 2 col 3', 'row 3 col 1', 'row 3 col 2', 'row 3 col 3'];

// Create a NodeList of every <td> with querySelectorAll()
var cells = document.querySelectorAll('td');

//Iterate through the Nodelist (cells[]) and assign a string from the array (content[])
for (var i = 0; i < cells.length; i++) {
  cells[i].innerHTML = content[i];
}

table {
  border: 3px solid grey;
  table-layout: fixed;
  margin: 40px auto;
}
td {
  border: 3px inset black;
  outline: 2px outset grey;
  height: 30px;
  width: 30px;
  color: blue;
  padding: 5px;
}

<table style="width:100%">
  <tr>
    <td id="tr0">&nbsp;</td>
    <td id="tr1">&nbsp;</td>
    <td id="tr2">&nbsp;</td>
  </tr>
  <tr>
    <td id="tr3">&nbsp;</td>
    <td id="tr4">&nbsp;</td>
    <td id="tr5">&nbsp;</td>
  </tr>
  <tr>
    <td id="tr6">&nbsp;</td>
    <td id="tr7">&nbsp;</td>
    <td id="tr8">&nbsp;</td>
  </tr>
</table>

answered Mar 20, 2016 at 0:25

zer00ne

45.2k6 gold badges50 silver badges82 bronze badges

5 Comments

tom3883 Over a year ago

Hi thank you very much for your answer. I have a another question so I have a few conditions do I have to put the array, the loop and the variable in each one of my condition ?

zer00ne Over a year ago

@tom3883 I'd have to see those conditions and what is expected of them and so forth, to give you a reasonable answer. But generally it is better to actually have conditions within the loop so the conditions will apply to each iteration (a full loop) of variables, expressions . etc...

tom3883 Over a year ago

Ok thank you, so it's better to put the loop over all the conditions and put the array in the conditions ?

zer00ne Over a year ago

In general but there times when a conditional actually drives a loop, once again it all depends...

zer00ne Over a year ago

@tom3883 Your welcome, sir. If you have anymore trouble, you might want to start another question concerning those conditionals and include a reference to this question. If my answer resolved your question, don't forget to check the green checkmark.

Collectives™ on Stack Overflow

Unable to update HTML table with JavaScript using innerHTML

2 Answers 2

Comments

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related