Как добавить кнопки jquery tabledit в новые строки таблицы

Вот лучшее решение, которое я мог придумать для вашей ситуации.

Я создал кнопку «Добавить». ПРИМЕЧАНИЕ атрибут 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. Очистить все входы и выбрать.

В моем ограниченном тестировании этот метод, похоже, работает.

jQuery Tabledit следует запускать каждый раз при перезагрузке таблицы. См. Ответ здесь: обновление Tabledit после разбивки на страницы

Это означает, что каждый раз, когда вы перезагружаете таблицу (например, переходите на новую страницу, обновляете и т. д.), Вы должны инициализировать Tabledit на странице таблицы, где он не был инициализирован. Проблема в том, что нет способа узнать, был ли Tabledit уже инициализирован в таблице, поэтому, если вы повторно инициализируете его, дублирующиеся кнопки (редактировать, удалить ...) будут добавлены в строки таблицы. Вы также не можете уничтожить несуществующий Tabledit, поэтому предварительный вызов разрушать не поможет.

Поэтому я создал свою собственную функцию, чтобы сообщить мне, инициализирован ли 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 с классом tabledit-toolbar, поскольку именно в этом блоке находятся кнопки Tabledit. Вы можете улучшать его как хотите. Это не идеальное решение, но лучшее, что я мог сделать.