Как мне вставить новый TR в СРЕДНЮЮ HTML-таблицу, используя JQuery?

Question

Я знаю, как добавить новую строку в таблицу с помощью JQuery:

var newRow = $("<tr>..."</tr>");
$("#mytable tbody").append(newRow);

Вопрос в том, как создать новую строку, которая предшествует какой-либо существующей строке.

Answer 1

var newRow = $("<tr>...</tr>");
$("#idOfRowToInsertAfter").after(newRow);

Ключ знает идентификатор строки, после которой вы хотите вставить новую строку, или, по крайней мере, придумывает некоторый синтаксис селектора, который поможет вам получить эту строку.

JQuery документы на after()

Answer 2

where_you_want_it.before(newRow)

или

newRow.insertBefore(where_you_want_it)

- MarkusQ

Answer 3

С:

var newTr = $('<tr>[...]</tr>');

Вы можете ...

1. Вставьте его после (или ранее, если вы того пожелаете) другой строки, для которой вы знаете идентификатор (или любое другое свойство):

   $('#<id of the tr you want to insert the new row after>').after(newTr)
   

2. Вставьте его после определенного индекса строки (индексы основаны на 0, а не на 1):

   $($('table#<id> tr')[<index>]).after(newTr)
   

3. … или, как вы упомянули, возможна абсолютная середина:

   var existingTrs = $('table#<id> tr')
   $(existingTrs[parseInt(existingTrs.length / 2)]).after(newTr)
   

Answer 4

Вместо этого:

$("#mytable tbody").append(newRow);

вы захотите сделать что-то вроде этого:

$("#id_of_existing_row").after(newRow);

Answer 5

Если, например, вы вставите изображение вставки в таблицу, это будет примерно так:

Ваша последняя ячейка в таблице:

 <td> <img class=\"insertRow\" src=\"/images/imgInsertRow.jpg\" /> </td>

Ваш JQuery код:

$('table td img.insertRow').click(function(){
   var newRow=$('<tr>........</tr>');
   $(this).parent().parent().after(newRow);
});