Rataiczak24 Rataiczak24 - 1 year ago 92
HTML Question

Delete, Edit, and Save Row Function on Dynamic HTML Table

I have an HTML table that imports data from a database. Currently, I have 4 buttons at the bottom. Add Row, Edit, Save, and Delete. I have the "Add Row" button working and functioning correctly. So my question is a two part question...

First, how can I get the delete function working?

Secondly, how can I get the edit and save function to start working as well?


<table id="html_master">

foreach ($dbh->query($sql) as $rows){
<td id="mr_id"><?php echo intval ($rows['MR_ID'])?></td>
<td id="mr_name"><?php echo $rows['MR_Name']?></td>
<td id="buyer_id"><?php echo $rows['Buyer_ID']?></td>
<td id="poc_n"><?php echo $rows['MR_POC_N']?></td>
<td id="poc_e"><?php echo $rows['MR_POC_E']?></td>
<td id="poc_p"><?php echo $rows['MR_POC_P']?></td>
<td align="center"><input type="checkbox" name="check" value="checked"></td>

<input type="button" class="add" value="Add Row" onclick="insRow('html_master')">
<input type="button" id="edit" value="Edit">
<input type="button" id="save" value="Save">
<input type="button" id="delRow" value="Delete" onclick="deleteRow('html_master')">

Javascript Code:

// ----- Deletes row -----
function deleteRow(tableID) {
try {
var table = document.getElementById(tableID);
var rowCount = table.rows.length;

for(var i=0; i<rowCount; i++) {
var row = table.rows[i];
var chkbox = row.cells[0].childNodes[0];
if(null != chkbox && true == chkbox.checked) {
}catch(e) {

// ----- Add Row -----

function insRow(tableID) {

var table = document.getElementById(tableID);

var rowCount = table.rows.length;
var row = table.insertRow(rowCount);

var cell1 = row.insertCell(0);
cell1.innerHTML = rowCount;

var cell2 = row.insertCell(1);
var element2 = document.createElement("input");
element2.type = "text";
element2.name = "txtbox[]";

var cell3 = row.insertCell(2);
var element3 = document.createElement("input");
element3.type = "text";
element3.name = "txtbox[]";

var cell4 = row.insertCell(3);
var element4 = document.createElement("input");
element4.type = "text";
element4.name = "txtbox[]";

var cell5 = row.insertCell(4);
var element5 = document.createElement("input");
element5.type = "text";
element5.name = "txtbox[]";

var cell6 = row.insertCell(5);
var element6 = document.createElement("input");
element6.type = "text";
element6.name = "txtbox[]";

var cell7 = row.insertCell(6);
var element7 = document.createElement("input");
element7.type = "checkbox";


Answer Source

In a quick mock-up test the following works ok and deletes the rows where a checkbox is checked.

By using querySelectorAll you can be quite specific with what you are trying to find - in the code below notice that it is looking for all input elements of type checkbox that are currently checked - once you have that nodelist it is easy to iterate through and perform whatever action(s) you need - in this case remove it's parent row.

function deleteRow(id){
    var tbl=document.getElementById(id);
    var col=tbl.querySelectorAll('input[type=\"checkbox\"]:checked');
    if( col ){
        for( var n in col )if( col[ n ].nodeType==1 ){
            try {
                var tr=col[ n ].parentNode.parentNode;
                var tbody=tr.parentNode;
                tbody.removeChild( tr );
            }catch( err ){
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download