Question

<table border="2">
    <tr><td>one</td><td>two</td></tr>
    <tr><td>one</td><td>two</td></tr>
    <tr><td colspan="2" id="new" >add new</td></tr>
</table>

$('#new').click(function(){
   $('#new').append("<tr><td>one</td><td>two</td></tr>");
})

现在，如果我点击“添加新”，那么这就是：

one | two
one | two
add new
one  two

我该如何制作：

one | two
one | two
one | two
add new

LIVE： http://jsfiddle.net/tg5qD/

Answer 1

$('#new').click(function(){
   $('#new').parent('tr').before("<tr><td>one</td><td>two</td></tr>");
})

Demo

Answer 2

您可以通过以下方式修改JavaScript代码：

$('#new').click(function(){
   $('#new').parent().before("<tr><td>one</td><td>two</td></tr>");
})

或者也可以修改HTML，以使用该脚本。

<table border="2">
    <tr><td>one</td><td>two</td></tr>
    <tr><td>one</td><td>two</td></tr>
    <tr id="new"><td colspan="2" >add new</td></tr>
</table>
<script>
  $('#new').click(function(){
    $('#new').before("<tr><td>one</td><td>two</td></tr>");
  });
</script>

第二个解决方案将点击处理程序附加到行而不是单元格。这样您就可以轻松使用before（jQuery docu）。

Answer 3

http://jsfiddle.net/tg5qD/5/

$('#new').on('click', function(){
   $('#new').parent().before("<tr><td>one</td><td>two</td></tr>");
})

Answer 4

演示 http://jsfiddle.net/eDNH5/2/

另一项工作演示 http://jsfiddle.net/eDNH5/5/

API：http://api.jquery.com/before/

更新了另一种方式

$('#new').click(function(){
    $('table tr:last').before('<tr><td>one</td><td>two</td></tr>');
})

<强>码

$('#new').click(function(){
   $('#new').parent().before("<tr><td>one</td><td>two</td></tr>");
})

Answer 5

您可能希望使用prepend()代替append()

以下是演示：http://jsfiddle.net/tg5qD/3/

Answer 6

$('#new').click(function(){
   $('#new').parent('tr').before("<tr><td>one</td><td>two</td></tr>");
})

演示：http://jsfiddle.net/tg5qD/4/

Answer 7

我实际上会在click事件中使用$(this)引用添加新按钮。保存您再次在DOM中查找元素。

$('#new').click(function(){
   $(this).parent().before("<tr><td>one</td><td>two</td></tr>");
})

更好的是，如果您使用.on事件对象，您可以根据需要灵活地在稍后关闭此点击事件。

$('#new').on({
   "click.addNew": function(){
       $(this).parent().before("<tr><td>one</td><td>two</td></tr>");
   }
})

JS小提琴：http://jsfiddle.net/tg5qD/11/

Answer 8

您可以使用以下方式..首先需要找到ID为'new'的父tr。然后我们可以将新元素追加到父元素之前。

$('#new').click(function(){
   $(this).parent('tr').before("<tr><td>one</td><td>two</td></tr>");
})

Answer 9

$('#new').click(function(){
   $("<tr><td>one</td><td>two</td></tr>").insertBefore($(this).parent());
});

了解.insertBefore()

<强> DEMO

如何追加或其他解决方案？

9 个答案: