php - 在从 JQuery 调用的行之后插入表行

Question

我试图在从提交按钮调用后将另一个表行插入到表中，

PHP/代码点火器:

<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/