从HTML表编辑和保存数据时更新SQL Server数据库

Question

我有一个从数据库导入数据的HTML表。目前，我底部有3个按钮。添加行，保存和删除。我有“添加行”和“删除”按钮正常工作和运行。所以我的问题是，有没有办法当我点击“保存”按钮时，它会自动更新并将数据保存到我正在访问的数据库中？

HTML / PHP：

<table id="html_master">
<thead>
    <tr>
    <td>MR_ID</td>
    <td>MR_Name</td>
    <td>Buyer_ID</td>
    <td>MR_POC_N</td>
    <td>MR_POC_E</td>
    <td>MR_POC_P</td>
    <td>Select</td>
    </tr>
</thead>
<tbody>

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

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

</body>
</html>

使用Javascript：

// ----- Delete Row -----

function deleteRow(html_master){
    var tbl=document.getElementById(html_master);
    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 ){
                console.warn(err);
                continue;
            }
        }
    }
}

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

function addRow(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);

    }