Вставить строку таблицы после строки, вызванной из JQuery

Question

Я пытаюсь вставить еще одну строку таблицы в таблицу после вызова с помощью кнопки отправки.

PHP / CodeIgniter:

<tr id="wiring_details_<?php echo $part->id;?>-<?php echo $zone->id;?>">
<td COLSPAN='2'>
    Wire Type: 
    <select name='select_wire_<?php echo $part->id; ?>' onchange='Estimate.select_wire( <?php echo $part->id;?>, this.value );'>
        <option value='' selected>Select wire..</option>
        <option value='1'>14/2</option>
        <option value='2'>14/4</option>
        <option value='3'>16/4</option>
        <option value='4'>16/2</option>
        <option value='5'>RG6</option>
        <option value='6'>CAT5</option>
        <option value='7'>RG59</option>
        <option value='8'>LVT</option>
        <option value='9'>CAT6</option>
        <option value='10'>HDMI</option>
        <option value='11'>Shielded CAT6</option>
    </select>    
</td>
<td COLSPAN='2'>Length: <input type='text' id='id_wire_length_<?php echo $part->id; ?>' name='wire_length_<?php echo $part->id; ?>' value='<?php echo $part->wire_length; ?>' /></td>
<td COLSPAN='2'>Retail Price: <input type='text' id='id_wire_retail_<?php echo $part->id; ?>' name='wire_retail_<?php echo $part->id; ?>' value='<?php echo $part->wire_retail / 100; ?>' /> </td>
<td COLSPAN='2'>Add Another: <input type='submit' id='id_wire_retail_<?php echo $part->id; ?>' name='wire_retail_<?php echo $part->id; ?>' value='Add Wire' onClick="addWire();" /> </td>
<input type='hidden' id='wire_id_<?php echo $part->id; ?>' name='wire_id_<?php echo $part->id; ?>' value='<?php echo $part->wire_id; ?>'/>
</tr>

В столбце «Добавить еще» есть отправкакнопка в нем, которая будет вставлять еще одну строку в DOM после строки, из которой она вызывается, как это может быть достигнуто в Javascript или JQuery, поскольку JQ также присутствует в этом проекте.

Я знаю в JQ, что яможет использовать что-то вроде $(this).parent().after?Но я не на 100% использую его.

Спасибо!

Answer 1

Я бы присвоил класс кнопкам ( кнопки добавления ), например class="add-button", а затем

$('.add-button').click( function() {
   $(this).closest('tr').after('<tr>...</tr>');
   return false;
});

Демо на http://jsfiddle.net/gaby/WCprC/

Answer 2

Если вы хотите добавить строку как последнюю в таблицу

$("#table_id").append($("<tr>"))

Если вы хотите добавить строку после определенной строки, в которой у вас есть кнопка отправки, сделайте sth.вот так

$("<tr>").insertAfter($(this).parents("tr").eq(0))

$("<tr>") создает объект jquery, так что вы можете манипулировать им, чтобы он мог иметь контент, который вы хотели бы.

Answer 3

$(this).parent().parent().after('<tr>...</tr>');

Ammended. Первым родителем кнопки должен быть TD, родительским элементом которого должен быть элемент TR, поэтому добавление после этого даст вам новую строку.

Answer 4

Попробуйте это:

$("#my_row_id").after(my_new_rows_data);

Answer 5

Только что заметил, что у вас есть скрытый элемент перед закрытием строки, вы должны поместить его в один из тд для проверки вашего кода.

Я делаю это тихо, но клонирую последнюю строкумоей таблицы, а затем "сбросить" свои значения