Javascript 如何在表的末尾和开头都添加额外的行jQuery

我有一张像这样的桌子

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

我想在这个表中添加额外的

行，所以我使用了这个方法

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

var target=$（'#mytable'）；
$（“#触发器”）。单击（函数（）{
$（''）。附录（目标）；
});

这会将字段添加到表的末尾。但是我希望它们被附加在静态

field3[]

和

field4

之间。我该怎么做呢？

试试看

var target=$（'#mytable'）；
$（“#触发器”）。单击（函数（）{
$（''）.insertBefore（target.find（'tr:has（input[name=“field4”]））；
});

演示：

---

另一种方法是使用

jQuery（函数（）{
var目标=$（“#mytable”）；
$（“#触发器”）。单击（函数（）{
target.find（'tr:has（input[name=“field4”]））。在（''）之前
});
})

演示：

结合-eg

$（''）.insertAfter（target.children（'tr'）.eq（2））

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

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>')
    });
})