如何在之后附加或其他解决方案

How to append after or other solution?

本文关键字：其他 解决方案 之后      更新时间：2023-09-26
<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/

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

演示

>演示 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>");
})​

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

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

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

你可能想使用 prepend（） 而不是 append（）

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

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

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

我实际上会在单击事件中使用$(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/

您可以使用

以下方式。首先需要找到 id 'new' 的父tr。然后我们可以将新元素附加到父元素之前。

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

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

阅读有关 .insertBefore（） 的信息

演示

相关文章：