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

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

我的代码中的一个小片段：

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

---

这是我能为您的情况想出的最佳解决方案

我创建了一个“添加”按钮注意

for table

属性，以便我以后可以确定要添加到哪个表

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

本质上

桌子的最后一行。（复制数据和所附事件）

确定并设置

行标识符

追加新行

自动单击编辑按钮

清除所有输入和选择

---

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

这是我能为您的情况想出的最佳解决方案

我创建了一个“添加”按钮注意

for table

属性，以便我以后可以确定要添加到哪个表

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

本质上

桌子的最后一行。（复制数据和所附事件）

确定并设置

行标识符

追加新行

自动单击编辑按钮

清除所有输入和选择

---

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

每次重新加载表时都应该执行jQuery Tabledit。请参见此处给出的答案：

这意味着每次重新加载表时（例如导航到新页面、刷新等），必须在未初始化表的页面上初始化Tabledit。问题是无法知道Tabledit是否已经在表上初始化，因此如果重新初始化，重复按钮（编辑、删除..）将添加到表的行中。您也不能销毁不存在的Tabledit，因此总是事先调用“destroy”将没有帮助

因此，我创建了自己的函数来告诉我Tabledit是否在表的某个页面上初始化：

function hasTabledit(table) {
    return $('tbody tr:first td:last > div', table).hasClass("tabledit-toolbar");
}

并按如下方式使用：

if( !hasTabledit($('#table')) ) {
   $('#table').Tabledit({
     url: 'example.php',
     columns: {
     identifier: [0, 'id'],
     editable: [[1, 'points'], [2, 'notes']]
   },
   editButton: true,
   deleteButton: false
  });
}

---

hasTabledit（..）

函数检查表格第一行的最后一个单元格是否有一个div，该div具有

tabledit工具栏

类，因为这是保存tabledit按钮的div。你可以随心所欲地改进它。这不是一个完美的解决方案，但这是我能做的最好的解决方案。

jQuery Tabledit应该在每次重新加载表时执行。请参见此处给出的答案：

这意味着每次重新加载表时（例如导航到新页面、刷新等），必须在未初始化表的页面上初始化Tabledit。问题是无法知道Tabledit是否已经在表上初始化，因此如果重新初始化，重复按钮（编辑、删除..）将添加到表的行中。您也不能销毁不存在的Tabledit，因此总是事先调用“destroy”将没有帮助

因此，我创建了自己的函数来告诉我Tabledit是否在表的某个页面上初始化：

function hasTabledit(table) {
    return $('tbody tr:first td:last > div', table).hasClass("tabledit-toolbar");
}

并按如下方式使用：

if( !hasTabledit($('#table')) ) {
   $('#table').Tabledit({
     url: 'example.php',
     columns: {
     identifier: [0, 'id'],
     editable: [[1, 'points'], [2, 'notes']]
   },
   editButton: true,
   deleteButton: false
  });
}

---

hasTabledit（..）

函数检查表格第一行的最后一个单元格是否有一个div，该div具有

tabledit工具栏

类，因为这是保存tabledit按钮的div。你可以随心所欲地改进它。这不是一个完美的解决方案，但这是我能做的最好的解决方案。

快速查看，Tabledit似乎不支持添加行//仅支持编辑/还原/删除。每次从头开始重新初始化

$（“#table”）.Tabledit（）

似乎是唯一的方法。当我尝试重新调整斜体时，它会在现有按钮旁边多次添加编辑器按钮。可能我尝试在重新初始化之前删除Tabledit编辑器列。不幸的是，我现在无法使用不同的表解决方案。您能否提供添加行之前、添加行之后的HTML以及添加行的代码。快速查看，Tabledit似乎不支持添加行//仅支持编辑/还原/删除。每次从头开始重新初始化

$（“#table”）.Tabledit（）

似乎是唯一的方法。当我尝试重新调整斜体时，它会在现有按钮旁边多次添加编辑器按钮。可能我尝试在重新初始化之前删除Tabledit编辑器列。不幸的是，我现在不能使用不同的表解决方案。您可以提供添加前的HTML、添加行后的HTML以及添加行的代码吗。