javascript - 如何将 jquery tabledit 按钮添加到表的新行

Question

如何告诉 jQuery tabledit 行已更改？这些按钮仅为现有行生成，当我添加新行(例如使用 jQuery)时，表格按钮不会出现在新行中。我在 tabledit 代码中看到，可以在 View 和编辑模式之间切换(也许这对我有帮助)，但不知道如何在创建 tabledit 后以及更改行时访问这些方法。

我的代码的一小段:

$(document).ready(function(){ 
    $(‘#btn’).click(function(){ ... adding row, I need to update tabledit here }); 
    $(‘#table’).Tabledit(...parameters...); } 
});

tabledit

Answer 1

这是我可以针对您的情况提出的最佳解决方案。

我创建了一个“添加”按钮。 注意 for-table 属性，以便我可以确定稍后要添加到哪个表。

<button id='add' for-table='#example1'>Add Row</button>

然后我为“添加”按钮创建了一个点击处理程序。

$("#add").click(function(e){
    var table = $(this).attr('for-table');  //get the target table selector
    var $tr = $(table + ">tbody>tr:last-child").clone(true, true);  //clone the last row
    var nextID = parseInt($tr.find("input.tabledit-identifier").val()) + 1; //get the ID and add one.
    $tr.find("input.tabledit-identifier").val(nextID);  //set the row identifier
    $tr.find("span.tabledit-identifier").text(nextID);  //set the row identifier
    $(table + ">tbody").append($tr);    //add the row to the table
    $tr.find(".tabledit-edit-button").click();  //pretend to click the edit button
    $tr.find("input:not([type=hidden]), select").val("");   //wipe out the inputs.
});

本质上；

1. Deep Clone表的最后一行。 (复制数据和附加事件)
2. 确定并设置行标识符。
3. 追加新行。
4. 自动点击编辑按钮。
5. 清除所有输入和选择。

在我有限的测试中，这种技术似乎有效。