動的HTMLテーブルの行の削除、編集、および保存

Question

データベースからデータをインポートするHTMLテーブルがあります。現在、私は下部に4つのボタンがあります。行の追加、編集、保存、および削除。私は "行を追加"ボタンが正常に機能している。だから私の質問は2つの部分の質問です...

まず、どのように私は削除機能を働かせますか？

第2に、編集と保存の機能をどのようにして起動するにはどうすればいいですか？

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

迅速なモックアップで、次のテストOK動作し、チェックボックスにチェックが入っている行を削除します。それは現在checkedあるタイプcheckboxのすべてinput要素を探していることを告知以下のコードで - - あなたが検索しようとしているものと非常に特異的であることができるquerySelectorAllを使用することにより

あなたが持っている一度それがしやすいのNodeListことあなたが必要とする何らかのアクションを反復して実行します。この場合、親行を削除します。あなたは、次のように利用できる機能がある場合は

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

が同じように私はそこにそれを追加しようと思いました：

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機能を簡素化することができます仕事では苦労していましたので、少し軽いコーディングが私の心をくつろいでくれました - あなたがcreateNodeという便利な機能を見つけてくれることを願っています。