从JQuery调用的行后插入表行

时间:2011-03-13 13:42:24

标签: php javascript jquery dom codeigniter

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

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%使用它。

谢谢!

5 个答案:

答案 0 :(得分:2)

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

修正。按钮中的第一个父项应该是TD,其父项应该是TR元素,因此在此之后添加将为您提供一个新行。

答案 1 :(得分:2)

如果要将行添加到表

的最后一行
$("#table_id").append($("<tr>"))

如果要在提交按钮的某一行之后添加行,请执行某项操作。像那样

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

$("<tr>")创建jquery对象,以便您可以操作它,以便它可以包含您想要的内容。

答案 2 :(得分:2)

我会选择按钮(添加按钮),如class="add-button",然后

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

http://jsfiddle.net/gaby/WCprC/

演示

答案 3 :(得分:1)

试试这个:

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

答案 4 :(得分:0)

刚刚注意到在你的行关闭之前你有一个隐藏的元素你应该把它放在一个td中来验证你的代码。

我安静地做了很多,但我克隆了我桌子的最后一行,然后“重置”他们的值