Adding new row to table using javascript

Question

I have searched and found similar answers to this but not exactly and I can't figure out what I'm doing wrong... Thanks for any help you can provide!

<html><head>
<script>
function doTheInsert() {
  var newRow=document.getElementById('myTable').insertRow();
  newRow="<td>New row text</td><td>New row 2nd cell</td>";
}
</script></head>
<body>
<table id="myTable" border="1">
  <tr>
    <td>First row</td>
    <td>First row 2nd cell</td>
  </tr>
  <tr>
    <td>Second row</td>
    <td>more stuff</td>
  </tr>
</table>
<br>
<input type="button" onclick="doTheInsert()" value="Insert new row"> 
</body></html>

createElement...

Daniel A. White
– Daniel A. White

2017-05-23 17:34:41 +00:00
Commented May 23, 2017 at 17:34 — Daniel A. White
– Daniel A. White, Commented May 23, 2017 at 17:34

Daniel Beck · Accepted Answer · 2017-05-23 17:42:37Z

8

I suppose it would be more formally correct to use insertCell for each added cell, but just dropping in the whole string will work if you set newRow's innerHTML:

function doTheInsert() {
  var newRow=document.getElementById('myTable').insertRow();
  // newRow = "<td>New row text</td><td>New row 2nd cell</td>"; <-- won't work
  newRow.innerHTML = "<td>New row text</td><td>New row 2nd cell</td>";
}

function doTheInsert() {
  var newRow=document.getElementById('myTable').insertRow();
  newRow.innerHTML="<td>New row text</td><td>New row 2nd cell</td>";
}

<table id="myTable" border="1">
  <tr>
    <td>First row</td>
    <td>First row 2nd cell</td>
  </tr>
  <tr>
    <td>Second row</td>
    <td>more stuff</td>
  </tr>
</table>

<input type="button" onclick="doTheInsert()" value="Insert new row">

edited May 23, 2017 at 17:42

answered May 23, 2017 at 17:39

Daniel Beck

21.7k5 gold badges43 silver badges61 bronze badges

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

Comments

nvioli · Accepted Answer · 2017-05-23 17:36:06Z

As per MDN, you need to add cells to the row after creating it.

function doTheInsert() {
  var newRow=document.getElementById('myTable').insertRow();
    // Insert a cell in the row at cell index 0
  var cell1   = newRow.insertCell(0);

  // Append a text node to the cell
  var cell1Text  = document.createTextNode('New row text')
  cell1.appendChild(cell1Text);

  // Insert a cell in the row at cell index 1
  var cell2   = newRow.insertCell(1);

  // Append a text node to the cell
  var cell2Text  = document.createTextNode('New row 2nd cell')
  cell2.appendChild(cell2Text);
}

<table id="myTable" border="1">
  <tr>
    <td>First row</td>
    <td>First row 2nd cell</td>
  </tr>
  <tr>
    <td>Second row</td>
    <td>more stuff</td>
  </tr>
</table>
<br>
<input type="button" onclick="doTheInsert()" value="Insert new row">

Mark Baijens · Accepted Answer · 2017-05-23 17:35:06Z

0

function doTheInsert() {
  newRow="<td>New row text</td><td>New row 2nd cell</td>";
  document.getElementById('myTable').innerHTML += newRow;
}

Been a while since i did normal javascript. But this should work. Probably not the nicest way to do it.

answered May 23, 2017 at 17:35

Mark Baijens

13.3k11 gold badges51 silver badges77 bronze badges

1 Comment

Daniel Beck Over a year ago

This does appear to work, with the one caveat that it generates an extra <tbody> along with each added row...

Jacob Boyd · Accepted Answer · 2017-05-23 17:41:25Z

Take a look at using this instead:

<html><head>
    <script>
        function doTheInsert() {
            var table = document.getElementById('myTable');
            var newRow = table.insertRow(-1);
            var newCell1 = newRow.insertCell(0);
            var newCell2 = newRow.insertCell(1);

            newCell1.innerHTML = "New row text";
            newCell2.innerHTML = "New row 2nd Cell";
            //newRow="<td>New row text</td><td>New row 2nd cell</td>";
        }
</script></head>
<body>
    <table id="myTable" border="1">
        <tr>
            <td>First row</td>
            <td>First row 2nd cell</td>
        </tr>
        <tr>
            <td>Second row</td>
            <td>more stuff</td>
       </tr>
</table>
<br>
<input type="button" onclick="doTheInsert()" value="Insert new row"> 
</body></html>

The .insertRow(-1) will append the new row to the end of the table, or use .insertRow(0) to prepend the new row to the table.

Collectives™ on Stack Overflow

Adding new row to table using javascript

4 Answers 4

Comments

Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related