編輯表格行javascript

我有一個表格，這個表格隨着Firebase動態地增加，我需要在表格的每一行上有一個delete和按鈕，目前，刪除按鈕正在工作，但我遇到了編輯按鈕，只見幾個例子身邊，但我不知道如何使用追加（）做...編輯表格行javascript

這是我到目前爲止有：

HTML

<table id="tableAssets" class="mdl-data-table mdl-js-data-table mdl-shadow--2dp"> 

    <thead> 
     <tr id="tableHeader"> 
     <th class="mdl-data-table__cell--non-numeric">Name</th> 
     <th class="mdl-data-table__cell--non-numeric">Brand</th> 
     <th class="mdl-data-table__cell--non-numeric"> </th> 
     </tr> 
    </thead> 

    <tbody id="table_body"> </tbody> 

</table>

的JavaScript

rootRef.on("child_added", snap => { 

    var assetKey = snap.child("id").val(); 
    var name = snap.child("name").val(); 
    var brand = snap.child("brand").val(); 

    $("#table_body").append("<tr data-id='"+assetKey+"'>"+ 
          "<td class='mdl-data-table__cell--non-numeric'>" + name + "</td>" + 
          "<td class='mdl-data-table__cell--non-numeric'>" + brand + "</td>" + 

          "<td class='mdl-data-table__cell--non-numeric'><div buttons>"+ 
           "<button class='edit-btn'><i class='material-icons'>mode_edit</i></button>"+" "+          
           "<button class='delete-btn'><i class='material-icons'>delete</i></button>"+" "+ 
          "</div></td></tr>"); 
});

這裏就是我想與編輯按鈕，這樣做的：隱藏整行，並添加一個新的具有保存的信息，但文本字段，並更改與編輯按鈕保存按鈕，但我不知道我應該怎麼做這個...

$("#table_body").on('click','.edit-btn', function(e){ 
var $row = $(this).closest('tr'); 
    $row.hide(); 

});

來源

2017-06-08 Leonardo Carvalho

我建議你這樣做：

有兩行，一個視圖，一個用於ED它的模式。這很容易被維護。
分配一個ID，整行： $("#table_body").append("<tr id='"+assetKey+"'>
然後單擊該編輯按鈕時，通過ID的一些方法，當你添加你擁有了它，它更容易爲。您可以使用的東西，像的onclick並調用該方法：

<button class='edit-btn' onclick=edit(\'"+assetKey+"\')><i class='material-icons'>mode_edit</i></button>

上編輯，隱藏點擊按鈕行並顯示該行的編輯模式。因爲它已經被渲染，所以它很好用，如果你有多行，保持不變： ('#'+id).hide();

編輯模式行「視圖」會顯示保存按鈕或其他你需要的東西。使用相同的技術/策略來調用save（）方法。

保存成功後，重建兩行並替換它們，以便一切都整齊並保持一致。

爲了理解這一點，它不僅僅是用文字說明的，它是一個在jsfiddle here上使用您的代碼的功能性示例。

希望這有幫助！

來源

2017-06-09 01:26:26 Juan

非常感謝，我一定會在今天晚些時候嘗試，我正在努力工作，但只是閱讀你的答案解決了很多問題，我有這個：D –

非常歡迎！如果您在閱讀本文時遇到任何問題，請隨時詢問:) – Juan

對不起，對於遲到的答案，我不再在這個項目上工作，但我現在是。當我將'data-id'更改爲'id'時，我發現了一個問題，因爲我當前在刪除按鈕上使用'data-id'，並且當我將其更改爲'id'時，它停止工作。刪除按鈕代碼如下：https：//pastebin.com/YGvK1mhT –

編輯表格行javascript

回答

相關問題