编辑表格行javascript

时间:2017-06-08 21:38:41

标签: javascript jquery html firebase firebase-realtime-database

我有一张表,使用Firebase动态增加,我需要在表格的每一行都有一个deleteedit按钮,目前,删除按钮正在运行,但我有编辑按钮有问题,我看了几个例子,但我不确定如何使用append()......

这是我到目前为止所拥有的:

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

});

1 个答案:

答案 0 :(得分:1)

我建议你这样做:

  1. 有两行,一行用于视图,一行用于编辑模式。这更容易 维护。
  2. 为整行分配一个ID: $("#table_body").append("<tr id='"+assetKey+"'>
  3. 然后当点击该编辑按钮时,将id传递给某个方法,就像你追加它时一样,它更容易。你可以用一些东西 喜欢onclick并调用方法:
  4. <button class='edit-btn' onclick=edit(\'"+assetKey+"\')><i class='material-icons'>mode_edit</i></button>

    1. 在编辑时,隐藏单击的按钮行并显示该行的编辑模式。因为它已经渲染,如果你有它,它的效果很好 多行,保持原位: ('#'+id).hide();
    2. 编辑模式行“视图”将显示保存按钮或您需要的任何其他内容。使用相同的技术/策略来调用save()方法。
    3. 保存成功后,重建两行并替换它们,以便一切都整洁并保持一致。
    4. 要理解这一点,并且不仅仅是单词,在jsfiddle here上使用代码的功能性示例。

      希望这有帮助!