Question

当我使用“ insertAfter”和“ after”之类的功能时，尽管可以将行直接添加到正在处理的行的下方，但页面上的其他按钮无法“看到”该内容。但是，当我使用“追加”时，它可以看到内容，但可以将其添加到当前行或表的底部。

如何使用添加将添加直接添加到我要定位的行下方。
这是jsfiddle.

<script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>

<table id="schedule">
    <tbody id="body">
        <tr class="sun">
            <td>Sunday</td>
            <td>Data</td>
            <td>
                <button type="button" name="button" class="add">Add Another</button>
            </td>
            <td>
                <button type="button" name="button" class="nr">Remove</button>
            </td>
        </tr>
        <tr class="mon">
            <td>Monday</td>
            <td>Data</td>
            <td>
                <button type="button" name="button" class="add">Add Another</button>
            </td>
            <td>
                <button type="button" name="button" class="nr">Remove</button>
            </td>
        </tr>
    </tbody>
</table>
I see <span id="isee">1</span> of that item

<script type="text/javascript">
    $(document).ready(function () {
        $(".add").click(function (e) {
            console.log("add");
            e.preventDefault();
            var thisClass = $(this).closest('tr').attr('class');
            $tr = $("<tr class='" + thisClass + ">'><td>Hello</td><td>World</td><td></td><td></td></tr>");
            // $tr.insertAfter($(this).closest("tr"));
            $tr.insertAfter($(this).closest("tr"));
            var count = $("." + thisClass).length;
            $("#isee").html(count);
        })

        $(".nr").click(function (e) {
            console.log("remove");
            e.preventDefault();
            var thisClass = $(this).closest('tr').attr('class');
            var count = $("." + thisClass).length;
            $("#isee").html(count);
            $("." + thisClass).each(function (e) {
                $(this).remove();
            })
        })
    });
</script>

Answer 1

您的班级名称有误。您拥有一个更大的东西。

$tr = $("<tr class='" + thisClass + ">'><td>Hello</td><td>World</td><td></td><td></td></tr>");

这应该是：

$tr = $("<tr class='" + thisClass + "'><td>Hello</td><td>World</td><td></td><td></td></tr>");

    $(".add").click(function(e) {
      console.log("add");
      e.preventDefault();
      var thisClass = $(this).closest('tr').attr('class');
      $tr = $("<tr class='" + thisClass + "'><td>Hello</td><td>World</td><td></td><td></td></tr>");
      // $tr.insertAfter($(this).closest("tr"));
      $tr.insertAfter($(this).closest("tr"));
      var count = $("." + thisClass).length;
      $("#isee").html(count);
    })

    $(".nr").click(function(e) {
      console.log("remove");
      e.preventDefault();
      var thisClass = $(this).closest('tr').attr('class');
      var count = $("." + thisClass).length;
      $("#isee").html(count);
      $("." + thisClass).each(function(e) {
        $(this).remove();
      })
    })

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="schedule">
  <tbody id="body">
    <tr class="sun">
      <td>Sunday</td>
      <td>Data</td>
      <td>
        <button type="button" name="button" class="add">Add Another</button>
      </td>
      <td>
        <button type="button" name="button" class="nr">Remove</button>
      </td>
    </tr>
    <tr class="mon">
      <td>Monday</td>
      <td>Data</td>
      <td>
        <button type="button" name="button" class="add">Add Another</button>
      </td>
      <td>
        <button type="button" name="button" class="nr">Remove</button>
      </td>
    </tr>
  </tbody>
</table>
I see <span id="isee">1</span> of that item

此外，在您的remove语句中，您要在实际删除项目之前对#isee进行计数和更新。这可能不是您的本意。

使用jQuery在当前行的正下方添加一行

1 个答案: