Question

我有一张类似的表;

<table id="mytable">
  <tr><td><input name="field1" type="text"></td></tr>
  <tr><td><input name="field2" type="text"></td></tr>
  <tr><td><input name="field3[]" type="text"></td></tr>
  <tr><td><input name="field4" type="text"></td></tr>
  <tr><td><input id="trigger" name="mybuttom" type="button" value="clickme"></td></tr>
</table>

我想在此表中添加额外的<tr><td><input name="field3[]" type="text"></td></tr>行，因此我使用了此方法;

var target = $('#mytable');
$('#trigger').click(function() {
  $('<tr><td><input name="field3[]" type="text"></td></tr>').appendTo(target);
});

这会将字段添加到表的末尾。但我希望将它们附加在静态field3[]和field4之间。我怎么能这样做？

Answer 1

尝试insertBefore()

var target = $('#mytable');
$('#trigger').click(function() {
  $('<tr><td><input name="field3[]" type="text"></td></tr>').insertBefore(target.find('tr:has(input[name="field4"])'));
});

演示：Fiddle

另一种方法是使用before()

jQuery(function(){
    var target = $('#mytable');
    $('#trigger').click(function() {
        target.find('tr:has(input[name="field4"])').before('<tr><td><input name="field3[]" type="text"></td></tr>')
    });
})

演示：Fiddle

如何将额外的行追加到表中，既不是在结尾，也不是在开头？ - jQuery

1 个答案: