Добавить строки в таблицу jQuery после текущей строки

Question

Я хотел знать, как мне добавить строки после определенной строки в моей таблице данных. Для этой цели я использую плагин jQuery datatables.

Я могу передать строку таблицы Index. что мне нужно вставить строку в мою функцию JavaScript, как показано ниже:

function addNewContact(rCount){ .. }

И мой HTML-код:
table id="exampleTbl"<br> tr<br> td..../td (data of first column)<br> td..../td (data of second column)<br> ...<br> td<br> input type="button" id="addNewContact<%=rCount %>" name="addNewContact_Details" value="+" onclick="javascript:addNewContact(<%=rCount %>);"<br> /td<br> /tr<br> /table

Для новой добавленной строки я хочу, чтобы первые 3 столбца были пустыми, а остальные столбцы (5) содержали текстовые поля.

Answer 1

Предполагается, что ваш стол выглядит так:

<table id="exampleTbl">  
    <tr>
        <td>....</td>
        <td>....</td>
        ...  
        <td>
           <button type="button" class="addRow" />+</button>
       </td>  
    </tr>
</table>

Вы можете добавить обработчик щелчка к кнопкам, добавляющим строку, подобную этой:

$(function() {
    // HTML template of a row
    var html = '<tr><td></td>...<td><button type="button" class="addRow">+</button></td></tr>';

    $('#exampleTbl').delegate('button.addRow', 'click', function() {
        var row = $(this).closest('tr'); // get the parent row of the clicked button
        $(html).insertAfter(row); // insert content
    });
});

Некоторые заметки:

• Код выполняется после загрузки DOM из-за $(function(){...}).
• Событие click перехватывается таблицей. Это гарантирует, что также работают кнопки вновь вставленных строк.
• Не смешивайте стили. Если вы используете jQuery, не присоединяйте обработчики кликов через атрибут onclick в HTML. Это делает ваш код сложным для сопровождения, и вы более гибки, делая это способом jQuery.

Надеюсь, это поможет, если у вас есть вопросы по этому поводу, пожалуйста, прокомментируйте этот пост.