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

直播：http : //jsfiddle.net/tg5qD/

4

9 回答 9

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

演示

于 2012-06-01T09:01:16.053 回答
1

您可以通过以下方式修改 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 文档）。

于 2012-06-01T08:57:54.510 回答
1

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

$('#new').on('click', function(){
   $('#new').parent().before("<tr><td>one</td><td>two</td></tr>");
})​
于 2012-06-01T08:58:12.413 回答
1

演示 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>");
})​
于 2012-06-01T08:58:30.947 回答
1

您可能想使用prepend()插入append()

这是一个演示：http: //jsfiddle.net/tg5qD/3/

于 2012-06-01T08:59:46.080 回答
1 
$('#new').click(function(){
   $('#new').parent('tr').before("<tr><td>one</td><td>two</td></tr>");
})

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

于 2012-06-01T09:00:34.713 回答
1

我实际上会$(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/

于 2012-06-01T09:08:21.737 回答
1

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

$('#new').click(function(){
   $(this).parent('tr').before("<tr><td>one</td><td>two</td></tr>");
})​
于 2012-06-01T09:12:24.637 回答
1 
$('#new').click(function(){
   $("<tr><td>one</td><td>two</td></tr>").insertBefore($(this).parent());
});

阅读.insertBefore()

演示

于 2012-06-01T09:32:02.077 回答