Question

我有一个包含行的表。在此表中，某些行的跨度为“add”类。当我点击“添加”时，我想动态创建一个新行。代码可以工作，但是当一个新行生成它时，它会在我的表的末尾。如何更改我的代码以仅在单击的行下添加新行，而不是在表的末尾？

这是我的代码：

<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
</head>
<body>
<table id="prices-table" border="1">
   <tr>
      <td>1</td>
      <td>Title<span class="add"><font color="red">add+</font></span></td>
      <td>price</td>
   </tr>

   <tr>
      <td>1</td>
      <td>Title </td>
      <td>price</td>
    </tr>

</table>      
<script>
$(document).ready(function () {
    $(".add").click(function () {
    $(this).closest('#prices-table')
        .append('<tr><td>newrow</td><td>newrow</td><td>newrow</td></tr>');
});
})
</script>
</body>
</html>

Answer 1

您可以closest使用tr，然后将append替换为after。

$(".add").click(function() {
    $(this).closest('tr').after('<tr><td>newrow</td><td>newrow</td><td>newrow</td></tr>');
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<table id="prices-table" border="1">
  <tr>
    <td>1</td>
    <td>Title<span class="add"><font color="red">add+</font></span></td>
    <td>price</td>
  </tr>
  <tr>
    <td>1</td>
    <td>Title</td>
    <td>price</td>
  </tr>
</table>

Answer 2

只需将closest("#prices-table")更改为closest('tr')，将append()更改为after()。

这将找到<tr>元素，它是被点击元素的父元素，并在其后面添加内容。

请参阅.after()的jQuery文档。

演示

$(document).ready(function () {
  $(".add").click(function () {
    $(this).closest('tr').after('<tr><td>newrow</td><td>newrow</td><td>newrow</td></tr>');
  });
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="prices-table" border="1">
   <tr>
      <td>1</td>
      <td>Title<span class="add"><font color="red">add+</font></span></td>
      <td>price</td>
   </tr>

   <tr>
      <td>1</td>
      <td>Title </td>
      <td>price</td>
    </tr>

</table>

Answer 3

您必须使用after代替append，因此您可以after设置parent span这样的元素

$(document).ready(function () {
    $(".add").click(function () {
        $(this).parent('tr').after('<tr><td>newrow</td><td>newrow</td><td>newrow</td></tr>');
    });
})

Answer 4

将点击功能的内容更改为：

CustomMapping

这样它会在最接近的$('<tr><td>newrow</td><td>newrow</td><td>newrow</td></tr>') .insertAfter($(this).closest("tr"));元素之后插入行。

使用jQuery动态添加新行

4 个答案:

演示