title: Delete, Edit, and Save Row Function on Dynamic HTML Table
body: <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>