Question

如果单击删除行按钮，将删除表格行。

如果单击添加按钮，则会在表体中添加新字段和删除行按钮。

我面临的问题是删除行按钮在我的html中工作，但不在我的javascript中。请帮忙。

＆＃13;

<!DOCTYPE html>
<html>

<head>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

  <!-- jQuery library -->
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>

  <!-- Latest compiled JavaScript -->
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  <title>Page 2</title>

</head>

<body>
  <table id="table">
    <tbody>
      <tr>
        <td>Field 1
          <input type="text" name="field1">
        </td>
        <td>

          <button class="btn removemebtn">Remove Row!</button>
        </td>
      </tr>
    </tbody>
  </table>

  <button class="btn" id="addbtn">Add</button>

  <script type="text/javascript">
    $(document)
      .ready(
        function() {
          $('#addbtn')
            .click(
              function() {
                $('tbody')
                  .append(
                    '<tr>' + '<td>' + 'Field 2 <input type="text" name="field2">' + '</td>' + '<td>' + '<button class="btn removemebtn">Remove Row!!' + '</button>' + '</td>'

                    + '</tr>');
              });

          $('.removemebtn').click(function() {
            $(this).closest('tr').remove();
          });
        });
  </script>
</body>

</html>

＆＃13;

Answer 1

您遇到的问题是因为您在.removebtn为$(document).ready ({/*..*/})设置了一个事件监听器，所以当您删除行时，新按钮将不会有相同的事件监听器。

将删除功能包装到函数中，并在调用该函数的每一行上设置onclick属性。

单击按钮时删除表格行

1 个答案: