在从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之一中以验证您的代码。

我这样做很安静，但是我克隆了表的最后一行，然后“重置”了它们的值