How can I create a new row in an HTML table

Question

I am trying to add a new row to this little table with just one column. Can anybody help? I created a new function for this purpose, for the moment it is not working.

function row_creator() {
  var table = document.getElementById("myTable")[0];
  var newRow = table.insertRow();
  var newCell = newRow.insertCell(0);
  var newText = document.createTextNode('New row');
  newCell.appendChild(newText);
}
row_creator();

table,
th,
td {
  border: 1px solid black;
}

<! --COMIENZO TABLA -->

<table id="MyTable" class="egt">



  <! --PRIMERA LINEA -->

  <tr>
    <th>Source ID</th>
  </tr>

  <! --SEGUNDA LINEA -->

  <tr>
    <td>
      <input type="number" id="fname" name="fname">
    </td>
    <tr>

</table>

score 2 · Answer 1 · answered Oct 14 '20 at 20:05

2

There are errors in this line document.getElementById("myTable")[0]

getElementById returns a element (not a collection) so no need of [0]
The Id must match your element Id MyTable with capital M

answered Oct 14 '20 at 20:05

Cedric Cholley

1,956
2
9
15

KashyapVadi · Answer 2 · 2020-10-14T20:28:33.470

1

function row_creator() {
  var table = document.getElementById("mytable"); /*not nedd [0] & same name use fore html and js*/
  var newRow = table.insertRow(); /* nedd position of row */
  var newCell = newRow.insertCell();/* add col in table*/
  newCell.innerHTML = "NEW CELL1"; /* to insert data in row [newCell] is var we have define and innerHTML to add html data*/ 
}


setInterval(row_creator, 1000);/* setInterval(className, Time[1000 = 1s]); */

table,
th,
td {
  border: 1px solid black;
}

<table id="mytable" class="egt">
    <! --PRIMERA LINEA -->
    <tr>
        <th>Source ID</th>
    </tr>
    <! --SEGUNDA LINEA -->
    <tr>
        <td>
            <input type="number" id="fname" name="fname">
        </td>
        <tr>
</table>

edited Oct 14 '20 at 20:28

answered Oct 14 '20 at 20:00

KashyapVadi

495
4
14

I would like to do it atomatically without any button – Miguel Gonzalez Oct 14 '20 at 20:03
setInterval(addnew, 1000); – KashyapVadi Oct 14 '20 at 20:05
tip :- setInterval(loaddata, 5000); in (1000 = 1s) – KashyapVadi Oct 14 '20 at 20:05
Run again...... – KashyapVadi Oct 14 '20 at 20:06
Explaining what you changed in the code and why makes for much more upvote-worthy answers... – Heretic Monkey Oct 14 '20 at 20:08
var table = get table; ---- var newRow = table.insertRow(0) [ create new row in this table] ------- var newCell = newRow.insertCell(0)[ this new row add new col()] ------- newCell.innerHTML = "NEW CELL1" [to put value (your data to add HTML value)] – KashyapVadi Oct 14 '20 at 20:23
This is your code try it – KashyapVadi Oct 14 '20 at 20:37

How can I create a new row in an HTML table

2 Answers2