Question

我正在尝试使用JS将行添加到HTML文件中的多个表中。现在有3张桌子。当我尝试单击每个表中的“添加”按钮时，将在所有3个表中添加该行，但每次只需要在每个表中添加一行。我刚刚开始学习HTML JQuery等。不胜感激。预先谢谢你！

这是我的JS和HTML文件的样子：

$(document.getElementById("table1")).ready(function() {
  $("#newrows").click(function() {
    var addcontrols = "<tr>"
    addcontrols += "<td><input type='text' name='jikan' placeholder='Enter time'></td>"
    addcontrols += "<td><input type='text' name='naiyou'></td>"
    addcontrols += "</tr>";
    $("table tbody").append(addcontrols);
  });
});

$(document.getElementById("table2")).ready(function() {
  $("#newrow").click(function() {
    var addcontrols1 = "<tr>"
    addcontrols1 += "<td><input type='text' name='jikan' placeholder='Enter time'></td>"
    addcontrols1 += "<td><input type='text' name='naiyou'></td>"
    addcontrols1 += "</tr>";
    $("table tbody").append(addcontrols1);
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<p>
  Today's Schedule<br>
</p>
<table border="1" id="table1">
  <thead>
    <tr>
      <th>時間</th>
      <th>内容</th>
    </tr>
  </thead>
  <tbody>
  </tbody>
  <tfoot>
    <tr>
      <td colspan="2"><input type="button" value="Add" id="newrows" style="width:500px" </td>
    </tr>
  </tfoot>
</table>
<p>
  Result Of The Day<br>
</p>
<table border="1" id="table2">
  <thead>
    <tr>
      <th>時間</th>
      <th>内容</th>
    </tr>
  </thead>
  <tbody>
  </tbody>
  <tfoot>
    <tr>
      <td colspan="2"><input type="button" value="Add" id="newrow" style="width:500px" </td>

    </tr>
  </tfoot>
</table>
<p>
  Tomorrow's Schedule<br>
</p>
<table border="1">
  <thead>
    <tr>
      <th>時間</th>
      <th>内容</th>
    </tr>
  </thead>
  <tbody>
  </tbody>
  <tfoot>
    <tr>
      <td colspan="2"><input type="button" value="Add" id="newrow" style="width:500px" </td>
    </tr>
  </tfoot>
</table>
<p>
  <input type="submit" name="send" value="送信">

Answer 1

您可以将这两个功能合而为一，并更具体地说明在何处附加这样的内容：

maximum-scale=1.0, minimum-scale=1.0

Answer 2

问题是因为发生点击时，您会附加所有table tbody元素。您需要使用DOM遍历将单击的按钮与目标tbody相关联。在这种情况下，您可以使用closest()和find()来做到这一点。

您还应该注意，document.ready处理程序的语法不正确，并且只能是其中之一。另外，您正在使用无效的重复id属性。按类将具有常见行为的元素分组。最后，您在按钮元素上缺少结尾>。

话虽如此，请尝试以下操作：

jQuery($ => {
  const addcontrols = '<tr><td><input type="text" name="jikan" placeholder="Enter time"></td><td><input type="text" name="naiyou"></td></tr>';
    
  $(".newrows").on('click', function() {
    $(this).closest('table').find('tbody').append(addcontrols);
  });
});

.newrows {
width:500px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<p>
  Today's Schedule<br>
</p>
<table border="1" id="table1">
  <thead>
    <tr>
      <th>時間</th>
      <th>内容</th>
    </tr>
  </thead>
  <tbody>
  </tbody>
  <tfoot>
    <tr>
      <td colspan="2"><input type="button" value="Add" class="newrows" /></td>
    </tr>
  </tfoot>
</table>
<p>
  Result Of The Day<br>
</p>
<table border="1" id="table2">
  <thead>
    <tr>
      <th>時間</th>
      <th>内容</th>
    </tr>
  </thead>
  <tbody>
  </tbody>
  <tfoot>
    <tr>
      <td colspan="2"><input type="button" value="Add" class="newrows" /></td>
    </tr>
  </tfoot>
</table>
<p>
  Tomorrow's Schedule<br>
</p>
<table border="1">
  <thead>
    <tr>
      <th>時間</th>
      <th>内容</th>
    </tr>
  </thead>
  <tbody>
  </tbody>
  <tfoot>
    <tr>
      <td colspan="2"><input type="button" value="Add" class="newrows" /></td>
    </tr>
  </tfoot>
</table>
<p>
  <input type="submit" name="send" value="送信" />
</p>

Answer 3

您可以使用以下代码：

$(document.getElementById("table1")).ready(function() {
      $("#newrows").click(function() {
      var parentTable  = $(this).closest("table")
        var addcontrols = "<tr>"
        addcontrols += "<td><input type='text' name='jikan' placeholder='Enter time'></td>"
        addcontrols += "<td><input type='text' name='naiyou'></td>"
        addcontrols += "</tr>";
        parentTable.append(addcontrols);
      });
    });

    $(document.getElementById("table2")).ready(function() {
      $("#newrow").click(function() {
      var parentTable  = $(this).closest("table")
        var addcontrols1 = "<tr>"
        addcontrols1 += "<td><input type='text' name='jikan' placeholder='Enter time'></td>"
        addcontrols1 += "<td><input type='text' name='naiyou'></td>"
        addcontrols1 += "</tr>";
        parentTable.append(addcontrols1);
      });
    });

但是如果可以使用通用类而不是id会更好。它会更干净，并且一个简单的代码块即可完成任务。只需在每个添加按钮中使用class =“ newrows”并使用以下代码。示例：

HTML：

<p>
  Today's Schedule<br>
</p>
<table border="1" id="table1">
  <thead>
    <tr>
      <th>時間</th>
      <th>内容</th>
    </tr>
  </thead>
  <tbody>
  </tbody>
  <tfoot>
    <tr>
      <td colspan="2"><input type="button" class="newrows" value="Add" id="newrows" style="width:500px" </td>
    </tr>
  </tfoot>
</table>
<p>
  Result Of The Day<br>
</p>
<table border="1" id="table2">
  <thead>
    <tr>
      <th>時間</th>
      <th>内容</th>
    </tr>
  </thead>
  <tbody>
  </tbody>
  <tfoot>
    <tr>
      <td colspan="2"><input type="button" class="newrows" value="Add" id="newrow" style="width:500px" </td>

    </tr>
  </tfoot>
</table>
<p>
  Tomorrow's Schedule<br>
</p>
<table border="1">
  <thead>
    <tr>
      <th>時間</th>
      <th>内容</th>
    </tr>
  </thead>
  <tbody>
  </tbody>
  <tfoot>
    <tr>
      <td colspan="2"><input type="button" value="Add" id="newrow" style="width:500px" </td>
    </tr>
  </tfoot>
</table>
<p>
  <input type="submit" name="send" value="送信">

jQuery：

$(document).ready(function() {
  $(document).on("click",".newrows",function() {
    var parentTable  = $(this).closest("table")
    var addcontrols = "<tr>"
    addcontrols += "<td><input type='text' name='jikan' placeholder='Enter time'></td>"
    addcontrols += "<td><input type='text' name='naiyou'></td>"
    addcontrols += "</tr>";
    parentTable.append(addcontrols);
  });
});

使用JS向多个HTML表添加行

3 个答案: