在從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

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

修正。 該按鈕的第一個父對象應該是TD，該按鈕的父對象應該是TR元素，因此在此之后添加將為您提供新的一行。

Answer 2

如果要向表的最后添加行

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

如果要在具有提交按鈕的特定行之后添加行，請執行某項操作。 像那樣

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

$("<tr>")創建jquery對象，以便您可以對其進行操作，使其具有所需的內容。

Answer 3

我會給按鈕（ 添加按鈕 ）一個類，例如class="add-button" ，然后

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

演示位於http://jsfiddle.net/gaby/WCprC/

Answer 4

嘗試這個：

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

Answer 5

剛剛注意到，在關閉行之前，您有一個隱藏的元素，您應該將其真正放入td之一中以驗證您的代碼。

我這樣做很安靜，但是我克隆了表的最后一行，然后“重置”了它們的值