Löschen, Bearbeiten und Speichern der Zeilenfunktion in Dynamic HTML Tabelle

Question

Ich habe eine HTML-Tabelle, die Daten aus einer Datenbank importiert. Momentan habe ich 4 Knöpfe am unteren Rand. Zeile hinzufügen, bearbeiten, speichern und löschen Ich habe die "Add Row" -Taste funktioniert und funktioniert ordnungsgemäß. Also meine Frage ist eine zweiteilige Frage ...

Erstens, wie kann ich die Löschfunktion funktioniert?

Zweitens, wie kann ich die Funktion zum Bearbeiten und Speichern beginnen zu arbeiten?

HTML/PHP-Code:

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

In einer schnellen Mock-up testen die folgenden funktioniert ok und löscht die Zeilen, in denen ein Kontrollkästchen aktiviert ist.

von querySelectorAll verwenden Sie können ganz spezifisch sein mit dem, was Sie versuchen, zu finden - in dem folgenden Code feststellen, dass es für alle input Elemente vom Typ sucht checkbox, die derzeit checked - sobald Sie haben, dass Nodelist es ist leicht zu Iterieren und führen Sie die gewünschten Aktionen durch - in diesem Fall entfernen Sie die übergeordnete Zeile.

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; 
      } 
     } 
    } 
} 

Wenn Sie eine Funktion, wie folgt aus:

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); 
    } 
} 

Dann können Sie vereinfachen die insRow Funktion wie:

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)); 
} 

Gerade dachte ich, dass dort hinzufügen würde als Es war ein harter Tag bei der Arbeit, also half mir ein wenig Licht, mich zu entspannen - ich hoffe, Sie werden feststellen, dass die createNode Funktion nützlich ist.