CODEWITHSUNDEEP
javascripthtml
Marco Di Francesco
Marco Di Francesco

Reputation: 45

Add rows in HTML table with JavaScript

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.

Chrome result Chrome result

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

Upvotes: 0

Views: 13764

Answers (3)

Kavian K.
Kavian K.

Reputation: 1370

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>

Upvotes: 3

Ckwan
Ckwan

Reputation: 9

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

Upvotes: 0

user2676208
user2676208

Reputation: 133

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

Upvotes: 1

Related Questions