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

Question

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

\n\n

我的代码中的一小段：

\n\n

$(document).ready(function(){ \n    $(\xe2\x80\x98#btn\xe2\x80\x99).click(function(){ ... adding row, I need to update tabledit here }); \n    $(\xe2\x80\x98#table\xe2\x80\x99).Tabledit(...parameters...); } \n});\n

\n\n

表格编辑器

\n

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. 深度克隆表的最后一行。（复制数据和附加事件）
2. 确定并设置row identifier.
3. 追加新行。
4. 自动点击Edit按钮。
5. 清除所有输入和选择。

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