Dynamically add/remove rows from html table

Question

I am working on a table that can be modified by pressing "Delete" buttons in each row and "Insert row" to add a new one at the end:

So far by now my code is:

<!DOCTYPE html>
<html>
<head>
<script>
function deleteRow(id,row) {
    document.getElementById(id).deleteRow(row);
}

function insRow(id) {
    var filas = document.getElementById("myTable").rows.length;
    var x = document.getElementById(id).insertRow(filas);
    var y = x.insertCell(0);
    var z = x.insertCell(1);
    y.innerHTML = '<input type="text" id="fname">';
    z.innerHTML ='<button id="btn" name="btn" > Delete</button>';
}
</script>
</head>
<body>

<table id="myTable" style="border: 1px solid black">
<tr>
  <td><input type="text" id="fname"></td>
  <td><input type="button" value="Delete" onclick="deleteRow('myTable',0)"></td>
</tr>
<tr>
  <td><input type="text" id="fname"></td>
  <td><input type="button" value="Delete" onclick="deleteRow('myTable',1)"></td>
</tr>
<tr>
  <td><input type="text" id="fname"></td>
  <td><input type="button" value="Delete" onclick="deleteRow('myTable',2)"></td>
</tr>
</table>
  
 <p>
<input type="button" onclick="insRow('myTable')" value="Insert row">
</p>
</body>
</html>

But i cannot attach the function onclick="deleteRow('myTable',0)" on

z.innerHTML ='<button id="btn" name="btn"> Delete</button>'

¿Is there something else i need to declare in order to make that button work when clicked?

Thanks for your answers

j08691 · Accepted Answer · 2015-01-28 03:42:32Z

18

First off, IDs must be unique, so why not use classes here instead?

Second, if you're using jQuery, then use jQuery.

Third, you need to use event delegation when dynamically adding elements, so try the following:

$('#myTable').on('click', 'input[type="button"]', function () {
    $(this).closest('tr').remove();
})
$('p input[type="button"]').click(function () {
    $('#myTable').append('<tr><td><input type="text" class="fname" /></td><td><input type="button" value="Delete" /></td></tr>')
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<table id="myTable" style="border: 1px solid black">
    <tr>
        <td>
            <input type="text" class="fname" />
        </td>
        <td>
            <input type="button" value="Delete" />
        </td>
    </tr>
    <tr>
        <td>
            <input type="text" class="fname" />
        </td>
        <td>
            <input type="button" value="Delete" />
        </td>
    </tr>
    <tr>
        <td>
            <input type="text" class="fname" />
        </td>
        <td>
            <input type="button" value="Delete" />
        </td>
    </tr>
</table>
<p>
    <input type="button" value="Insert row">
</p>

answered Jan 28, 2015 at 3:42

j08691

208k33 gold badges269 silver badges281 bronze badges

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

1 Comment

David Menacho Over a year ago

Thanks. I was looking for a way to avoid using the javascript part because im working with google apps service, but i figure out that if i put the first part at the end of the second and surrounded with <script> </script> the code works fine!

Musa · Accepted Answer · 2016-01-25 10:49:54Z

On each DeleteRow(tableId,Index) function you are passing table id and static index that's why document.getElementById("mytable").deleteRow(Index) first find table node then find no of tr element as children and assigns the index to tr element start from 0 and delete the matching index tr element.

Whenever you delete first row then it will matches the 0 index from 3 elements and deletes the first row. Now there are 2 tr left with index 0 and 1 dynamically assign by table but you trying to match with 1 and 2.

for deleting second row it will delete tr with index 1 (third tr) not the second tr.

for deleting third row actual index is 0 (after deleting 2 rows) and you are passing 1 because of this reason it wont find the matching index.

Here is Simple javascript soltution.

<script>

function delRow(currElement) {
     var parentRowIndex = currElement.parentNode.parentNode.rowIndex;
     document.getElementById("myTable").deleteRow(parentRowIndex);
}

</script>

and html,

<table id="myTable" style="border: 1px solid black">
<tr>
  <td><input type="text" id="fname"></td>
  <td><input type="button" value="Delete" onclick="delRow(this)"></td>
</tr>
<tr>
  <td><input type="text" id="fname"></td>
  <td><input type="button" value="Delete" onclick="delRow(this)"></td>
</tr>
<tr>
  <td><input type="text" id="fname"></td>
  <td><input type="button" value="Delete" onclick="delRow(this)"></td>
</tr>
</table>

here is jsfiddle exmple

Click Here

sticky_elbows · Accepted Answer · 2018-07-01 13:25:06Z

Say you have the following table:

<table id="myTable">
                <thead>
                    <tr>
                        <th>First Name</th>
                        <th>Last Name</th>
                        <th>Email</th>
                        <th></th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td><input type="text" name="firstName" /></td>

                        <td><input type="text" name="lastName" /></td>

                        <td> <input type="text" name="email" /></td>                            
                    </tr>                       
                </tbody>
                <p>
                    <label>Insert</label>
                    <input type="number" value="1" id="numberOfRowsToInsert">
                    <input type="button" value="Insert row" id="insert-line-button">
                </p>
</table>

The following jquery code will generate x number of rows entered by the user and append them to the bottom of the table with the ability to delete them if needed:

$('#insert-line-button').on("click", function(){
    var noOfRows = $('#numberOfRowsToInsert').val();
    for(var i = 0; i < noOfRows; i++){
        $('#myTable').append("<tr>" +
                "<td><input type='text' name='firstName' /></td>" +
                "<td><input type='text' name='lastName' /></td>" +
                "<td> <input type='text' name='email' /></td>" +
                "<td><input type='button' value='Delete' id='deleteRowButton' /></td>" +
                "</tr>")        
    }

});

And the following jquery code will remove the rows when clicked on the 'Delete' button:

$("#myTable").on('click', 'input[id="deleteRowButton"]', function(event) {
    $(this).parent().parent().remove();
});

Manish Jain · Accepted Answer · 2019-07-05 11:18:10Z

Go through below code:
You can see that this is the most basic way to create dynamic table. You can use this approach and can try yourself to remove rows from the existing table. I have not used any pluggin/ jquery. You can just copy this code and save as an html file to see how this code is working. Go head! Good luck.


    <html>
        <script>
        function CreateTableAndRows(){
            var mybody = document.getElementsByTagName("body")[0];
            var newTable = document.createElement("table"); 
            var newTableHead = document.createElement("thead");
            var headRow = document.createElement("tr");     
            var headHead1 = document.createElement("th");
            var headRowCellValue = document.createTextNode("Device Name");
            headHead1.appendChild(headRowCellValue);
            var headHead2 = document.createElement("th");   
            headRowCellValue = document.createTextNode("Start Timing");
            headHead2.appendChild(headRowCellValue);
            var headHead3 = document.createElement("th");   
            headRowCellValue = document.createTextNode("End Timing");
            headHead3.appendChild(headRowCellValue);
            var headHead4 = document.createElement("th");   
            headRowCellValue = document.createTextNode("Duration");
            headHead4.appendChild(headRowCellValue);
            headRow.appendChild(headHead1);
            headRow.appendChild(headHead2);
            headRow.appendChild(headHead3);
            headRow.appendChild(headHead4);
            newTableHead.appendChild(headRow);
            newTable.appendChild(newTableHead);     
            var newTableBody = document.createElement("tbody");
            for(var rowCount=0;rowCount<5;rowCount++)
            {
                var newTableRow = document.createElement("tr");         
                for(var cellCount=0; cellCount<4; cellCount++)
                {
                    var newTableRowCell = document.createElement("td");
                    var cellValue = document.createTextNode("cell is row"+rowCount+", coumn "+cellCount);
                    newTableRowCell.appendChild(cellValue);
                    newTableRow.appendChild(newTableRowCell);
                }
                newTableBody.appendChild(newTableRow);
            }
            newTable.appendChild(newTableBody);
            newTable.setAttribute("border","2");
            mybody.appendChild(newTable);
        }    
   </script>
   </head>
   <body>
    <input type="submit" onclick="CreateTableAndRows();">
   </body>
  </html>

Collectives™ on Stack Overflow

Dynamically add/remove rows from html table

4 Answers 4

1 Comment

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related