Delete, Edit, and Save Row Function on Dynamic HTML Table
<p>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...</p>

<p>First, how can I get the delete function working?</p>

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

<p>HTML/PHP Code:</p>

<pre><code>&lt;table id="html_master"&gt;
&lt;thead&gt;
    &lt;tr&gt;
    &lt;td&gt;MR_ID&lt;/td&gt;
    &lt;td&gt;MR_Name&lt;/td&gt;
    &lt;td&gt;Buyer_ID&lt;/td&gt;
    &lt;td&gt;MR_POC_N&lt;/td&gt;
    &lt;td&gt;MR_POC_E&lt;/td&gt;
    &lt;td&gt;MR_POC_P&lt;/td&gt;
    &lt;td&gt;Select&lt;/td&gt;
    &lt;/tr&gt;
&lt;/thead&gt;
&lt;tbody&gt;

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

        &lt;input type="button" class="add" value="Add Row" onclick="insRow('html_master')"&gt;
        &lt;input type="button" id="edit" value="Edit"&gt;
        &lt;input type="button" id="save" value="Save"&gt; 
        &lt;input type="button" id="delRow" value="Delete" onclick="deleteRow('html_master')"&gt;
</code></pre>

<p>Javascript Code:</p>

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

    for(var i=0; i&lt;rowCount; i++) {
        var row = table.rows[i];
        var chkbox = row.cells[0].childNodes[0];
        if(null != chkbox &amp;&amp; true == chkbox.checked) {
            table.deleteRow(i);
            rowCount--;
            i--;
        }
    }
    }catch(e) {
        alert(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[]";
    cell2.appendChild(element2);

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

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

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

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

    var cell7 = row.insertCell(6);
    var element7 = document.createElement("input");
    element7.type = "checkbox";
    element7.name="chkbox[]";
    cell7.appendChild(element7);

    }
</code></pre>