Add rows in HTML table with JavaScript

Question

I'd like to write <td> tags with JavaSctipt in my HTML code. I'm building a <table> in the main code and I'd like to continue it with a <script>, adding rows in the division.

<body>
  <table>
    <tr>
      <td>First</td>
    </tr>
    <div id="searchOutput"></div>
    <tr>
      <td>Last</td>
    </tr>
  </table>
  <script>
  document.getElementById("searchOutput").innerHTML = "<tr><td>Middle<td><tr>";
  </script>
</body>

The problem is that the <script> creates another table in a strange way.

Is there a way to add rows without writing all code (including <table> tags) in the <script>?

table children should not be divs. Try selecting the table and appending a tr to it, or selecting an existing tr and putting tds/text into it — CertainPerformance
– CertainPerformance, Commented Jun 16, 2018 at 1:32
I already tried to insert the table data in various tag like <p> or <h1> and the problem was already there. I also tried to put a <td> in a <tr> but the result was always the same. — Marco Di Francesco
– Marco Di Francesco, Commented Jun 16, 2018 at 10:49

Kavian K. · Accepted Answer · 2018-06-16 01:51:38Z

3

For insert new row in the table, you can use Table insertRow() and insertCell() Methods. The insertRow() methods creates an empty <tr> element and adds it to a table. The insertCell() method inserts a cell into the current row.

See the code below:

function addRows() {
  var table = document.getElementById( 'myTable' ),
      row = table.insertRow(0),
      cell1 = row.insertCell(0),
      cell2 = row.insertCell(1);

  cell1.innerHTML = 'Cell 1';
  cell2.innerHTML = 'Cell 2';
}

table {
  border: 1px solid #999;
  border-collapse: collapse;
  width: 100%
}
td {
  border: 1px solid #999
}

<p>
  <button onclick="addRows()">Add a new row</button>
</p>
<table id="myTable"></table>

answered Jun 16, 2018 at 1:51

Kavian K.

1,3701 gold badge9 silver badges11 bronze badges

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

Comments

user2676208 · Accepted Answer · 2018-06-16 01:42:22Z

1

CertainPerformance is correct; divs should not be direct children of tables. You might find this question useful. You have the right idea, if only you could actually replace the HTML of the div as opposed to simply filling it in. So, you could set the ID of the Last tr to searchOutput. Then, something like

var newRow = document.createElement("tr");
var oldRow = document.getElementById("searchOutput");
newRow.innerHTML = "<tr><td>Middle</td></tr>";
document.getElementByTagName("table").insertBefore(row, oldRow);

answered Jun 16, 2018 at 1:42

user2676208

1337 bronze badges

Comments

Ckwan · Accepted Answer · 2018-06-16 01:50:34Z

-1

Take a look at the example from w3cschools.com https://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_table_insertrow

answered Jun 16, 2018 at 1:50

Ckwan

74 bronze badges

1 Comment

Barmar Over a year ago

While this may technically answer the question, it would be preferable to include the essential parts of the answer here, and provide the link for reference.

Collectives™ on Stack Overflow

Add rows in HTML table with JavaScript

3 Answers 3

Comments

Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related