All geek questions in one place

Dynamically add / remove rows from html table.

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

So far 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 can’t attach the function onclick = "deleteRow ('myTable', 0)" on

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

¿Is there anything else I need to declare in order to get this button to work when clicked?

thank you for your responses

+7
source share
4 answers

First, identifiers must be unique, so why not use classes here?

Secondly, if you are using jQuery, use jQuery.

Third, you need to use delegation when adding items dynamically, 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>
+12
source

In each function DeleteRow(tableId,Index) you pass the table identifier and a static index, so document.getElementById("mytable").deleteRow(Index) first find the node table, then find no tr elements as children and do not assign an index element tr element start from 0 and do not delete the corresponding index tr.

Whenever you delete the first row, it will correspond to index 0 of 3 elements and delete the first row. Now there are 2 three left with index 0 and 1, dynamically assigned according to the table, but you are trying to match with 1 and 2.

to delete the second line, it will remove tr with index 1 (third tr), not the second tr.

to delete the actual index of the third row - 0 (after deleting 2 rows), and you go through 1, because for this reason it will not find the corresponding index.

Here is a simple javascript solution.

 <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 jsfiddle exmple

Press here

+2
source

Let's 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 the number of rows entered by the user and add them to the end of the table with the option to delete them if necessary:

 $('#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 delete the lines when you click on the "Delete" button:

 $("#myTable").on('click', 'input[id="deleteRowButton"]', function(event) { $(this).parent().parent().remove(); });
+2
source 
 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. <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="AddRow();"> </body> </html>
0
source

Source: https://habr.com/ru/post/1212073/

More articles:


All Articles