Add rows to a table with a button

Question

How can I add rows to this table?

I have searched on StackOverflow, but I haven't found nothing :(

Can someone help me? Here is my current code:

function addRow(tableID) {
  // Get a reference to the table
  var tableRef = document.getElementById(tableID);

  // Insert a row in the table at row index 0
  var newRow = tableRef.insertRow(0);

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

  // Append a text node to the cell
  var newText = document.createTextNode('New top row');
  newCell.appendChild(newText);
}

addRow('prova');

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Add rows</title>
</head>

<body>
<table cellspacing="0" cellpadding="0" border="3px" id="prova">
  <col width="64" span="2">
  <col width="145">
  <col width="195">
  <col width="145" span="2">
  <col width="298">
  <col width="241">
  <col width="246">
  <tr>
    <td width="64" bgcolor="#FFF616"><button name="aggiungiRigaMezzi" type="submit"  >ADD ROWS 1</button></td>
    <td width="64" bgcolor="#FFF616">14</td>
    <td width="145" bgcolor="#FFF616">POS Int. 01</td>
    <td width="195" bgcolor="#FFF616">Titolo:</td>
    <td width="290" colspan="2" bgcolor="#FFF616">&nbsp;</td>
    <td width="298" bgcolor="#FFF616">Caricare    eventuali Integrazioni al POS Master</td>
    <td width="241" bgcolor="#FFF616">&nbsp;</td>
    <td width="246" bgcolor="#FFF616">&nbsp;</td>
  </tr>
  <tr>
    <td></td>
    <td>14a</td>
    <td>POS Int. 02</td>
    <td>Titolo:</td>
    <td colspan="2">&nbsp;</td>
    <td>Caricare eventuali    Integrazioni al POS Master</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td></td>
    <td>14b</td>
    <td>POS Int. 03</td>
    <td>Titolo:</td>
    <td colspan="2">&nbsp;</td>
    <td>Caricare eventuali    Integrazioni al POS Master</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td bgcolor="#FFF616"><button name="aggiungiRigaMezzi" type="submit" >ADD ROWS 2</button></td>
    <td bgcolor="#00F305">&nbsp;</td>
    <td colspan="7" bgcolor="#00F305">Allegati al    POS</td>
  </tr>
  <tr>
    <td></td>
    <td bgcolor="#00F305">15</td>
    <td colspan="2" bgcolor="#00F305">Registro infortuni</td>
    <td colspan="2" bgcolor="#00F305">&nbsp;</td>
    <td bgcolor="#00F305">&nbsp;</td>
    <td bgcolor="#00F305">&nbsp;</td>
    <td bgcolor="#00F305">&nbsp;</td>
  </tr>
  <tr>
    <td></td>
    <td bgcolor="#00F305">16</td>
    <td colspan="2" bgcolor="#00F305">Nomina    RSPP </td>
    <td colspan="2" bgcolor="#00F305">&nbsp;</td>
    <td bgcolor="#00F305">&nbsp;</td>
    <td bgcolor="#00F305">&nbsp;</td>
    <td bgcolor="#00F305">&nbsp;</td>
  </tr>
  <tr>
    <td></td>
    <td bgcolor="#00F305">17</td>
    <td colspan="2" bgcolor="#00F305">Attestato    di formazione RSPP</td>
    <td colspan="2" bgcolor="#00F305">&nbsp;</td>
    <td bgcolor="#00F305">&nbsp;</td>
    <td bgcolor="#00F305">&nbsp;</td>
    <td bgcolor="#00F305">&nbsp;</td>
  </tr>
  <tr>
    <td></td>
    <td bgcolor="#00F305">18</td>
    <td colspan="2" bgcolor="#00F305">Verbale    elezione RLS </td>
    <td colspan="2" bgcolor="#00F305">&nbsp;</td>
    <td bgcolor="#00F305">&nbsp;</td>
    <td bgcolor="#00F305">&nbsp;</td>
    <td bgcolor="#00F305">&nbsp;</td>
  </tr>
</table>
</body>
</html>

When user click in the first button the "add rows 1" function it only add the rows under yellow rows...

When user click on the second button the "add rows 2" function must add all the green rows and all the green columns.

I found this link after a quick search, it should offer some insight. https://stackoverflow.com/questions/18333427/how-to-insert-row-in-html-table-body-in-javascript — Adam H, Aug 08 '18 at 19:36
hey keep calm I just forgot to put javascript function .. @IsaacAbramowitz — NarcosZTK_10, Aug 08 '18 at 19:50
@AdamH thank you for help but i don't use tbody tfoot and thead ... i'm using only rows(td) and columns(tr) — NarcosZTK_10, Aug 08 '18 at 19:53

score 0 · Answer 1 · answered Aug 09 '18 at 13:45

I would recommend using document.createElement to create tr and td elements, and then append them to the table. You can either use textContent or create a textNode as you did in your example to add text.

Also, delegate click events to the buttons so that they execute the function when clicked.

document.getElementById("button1").addEventListener("click", function() {
  addRow("prova");
});
document.getElementById("button2").addEventListener("click", function() {
  addRow("prova");
});

function addRow(tableID) {

  var newRow = document.createElement("tr");
  var newCell = document.createElement("td");
  var newText = document.createTextNode("New top row");
  
  newCell.appendChild(newText);
  newRow.appendChild(newCell);
  document.getElementById(tableID).appendChild(newRow);
}

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Add rows</title>
</head>

<body>
<table cellspacing="0" cellpadding="0" border="3px" id="prova">
  <col width="64" span="2">
  <col width="145">
  <col width="195">
  <col width="145" span="2">
  <col width="298">
  <col width="241">
  <col width="246">
  <tr>
    <td width="64" bgcolor="#FFF616"><button id="button1" name="aggiungiRigaMezzi" type="submit"  >ADD ROWS 1</button></td>
    <td width="64" bgcolor="#FFF616">14</td>
    <td width="145" bgcolor="#FFF616">POS Int. 01</td>
    <td width="195" bgcolor="#FFF616">Titolo:</td>
    <td width="290" colspan="2" bgcolor="#FFF616">&nbsp;</td>
    <td width="298" bgcolor="#FFF616">Caricare    eventuali Integrazioni al POS Master</td>
    <td width="241" bgcolor="#FFF616">&nbsp;</td>
    <td width="246" bgcolor="#FFF616">&nbsp;</td>
  </tr>
  <tr>
    <td></td>
    <td>14a</td>
    <td>POS Int. 02</td>
    <td>Titolo:</td>
    <td colspan="2">&nbsp;</td>
    <td>Caricare eventuali    Integrazioni al POS Master</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td></td>
    <td>14b</td>
    <td>POS Int. 03</td>
    <td>Titolo:</td>
    <td colspan="2">&nbsp;</td>
    <td>Caricare eventuali    Integrazioni al POS Master</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td bgcolor="#FFF616"><button id="button2" name="aggiungiRigaMezzi" type="submit" >ADD ROWS 2</button></td>
    <td bgcolor="#00F305">&nbsp;</td>
    <td colspan="7" bgcolor="#00F305">Allegati al    POS</td>
  </tr>
  <tr>
    <td></td>
    <td bgcolor="#00F305">15</td>
    <td colspan="2" bgcolor="#00F305">Registro infortuni</td>
    <td colspan="2" bgcolor="#00F305">&nbsp;</td>
    <td bgcolor="#00F305">&nbsp;</td>
    <td bgcolor="#00F305">&nbsp;</td>
    <td bgcolor="#00F305">&nbsp;</td>
  </tr>
  <tr>
    <td></td>
    <td bgcolor="#00F305">16</td>
    <td colspan="2" bgcolor="#00F305">Nomina    RSPP </td>
    <td colspan="2" bgcolor="#00F305">&nbsp;</td>
    <td bgcolor="#00F305">&nbsp;</td>
    <td bgcolor="#00F305">&nbsp;</td>
    <td bgcolor="#00F305">&nbsp;</td>
  </tr>
  <tr>
    <td></td>
    <td bgcolor="#00F305">17</td>
    <td colspan="2" bgcolor="#00F305">Attestato    di formazione RSPP</td>
    <td colspan="2" bgcolor="#00F305">&nbsp;</td>
    <td bgcolor="#00F305">&nbsp;</td>
    <td bgcolor="#00F305">&nbsp;</td>
    <td bgcolor="#00F305">&nbsp;</td>
  </tr>
  <tr>
    <td></td>
    <td bgcolor="#00F305">18</td>
    <td colspan="2" bgcolor="#00F305">Verbale    elezione RLS </td>
    <td colspan="2" bgcolor="#00F305">&nbsp;</td>
    <td bgcolor="#00F305">&nbsp;</td>
    <td bgcolor="#00F305">&nbsp;</td>
    <td bgcolor="#00F305">&nbsp;</td>
  </tr>
</table>
</body>
</html>

Add rows to a table with a button

1 Answers1