刪除，編輯和保存動態HTML表上的行功能

Question

我有一個從數據庫導入數據的HTML表。 目前，我在底部有4個按鈕。 添加行，編輯，保存和刪除。 我的“添加行”按鈕正常工作。 所以我的問題是一個兩部分的問題...

首先，如何使刪除功能正常工作？

其次，如何獲得編輯和保存功能以使其開始工作？

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"><?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>
    </tr>
 <?php
  }
 ?>
</tbody>
</table>

        <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代碼：

// ----- 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) {
            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);

    }

Answer 1

在快速的模型測試中，以下工作正常，並刪除選中了復選框的行。

通過使用querySelectorAll您可以非常明確地找到要查找的內容-在下面的代碼中，它正在查找當前checked所有類型為checkbox input元素-一旦擁有該節點列表，就很容易迭代和執行您需要執行的任何操作-在這種情況下，請刪除其父行。

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 ){
                console.warn(err);
                continue;
            }
        }
    }
}

如果您具有如下可用功能：

function createNode( type, attribs, parent ) {
    /*
        @type - the html element type you wish to add. By default if you use 'null' as the value it will insert a div
        @attribs - Object literal of param:value pairs to add as attributes to the new html node
        @parent - the parent html element to which the new node will be added.

        This returns the new node. The parent can also be another call to `createNode`
    */
    try{
        var el = ( typeof( type )=='undefined' || type==null ) ? document.createElement( 'div' ) : document.createElement( type );
        for( var n in attribs ) if( attribs.hasOwnProperty( n ) && n!=='innerHTML' ) el.setAttribute( n, attribs[ n ] );
        if( attribs.hasOwnProperty('innerHTML') ) el.innerHTML=attribs.innerHTML;
        if( parent!=null ) typeof( parent )=='object' ? parent.appendChild( el ) : document.getElementById( parent ).appendChild( el );
        return el;

    }catch(err){
        console.warn('createNode: %s, %o, %o',type, attribs, parent);
    }
}

然后可以簡化insRow函數，例如：

function insRow(id){

    var tbl=document.getElementById( id );
    var tbody = tbl.querySelectorAll('tbody')[0];
    var rows = tbody.querySelectorAll('tr');

    var row = createNode( 'tr',{},tbody );
    var td = createNode('td',{ innerHTML:rows.length },row );

    /* add 5 table cells with textfields */
    for( var i=0; i < 5; i++ ){
        createNode('input',{ type:'text',name:'txtbox[]'},createNode('td',{},row ) );
    }
    /* Add table cell with checkbox */
    createNode('input',{ type:'checkbox',name:'chkbox[]'},createNode('td',{},row ) );
}

我只是想補充一下，因為這是辛苦的一天，所以一些簡單的編碼可以幫助我放松一下-希望您會發現createNode函數很有用。