为什么按钮不将行附加到表格？ [复制]答案

【问题标题】：为什么按钮不将行附加到表格？ [复制]
【发布时间】：2022-01-23 07:17:04
【问题描述】：

喂！我的代码通过单击 div 动态创建表，但它仅将行附加到第一个。所有表格都存储在div中，包含表格本身和带有添加行按钮的div，包含在主div中。

HTML

<div id="main-container">
  <div id="container">
    <table id="table" class="my-table">
      <tr>
        <th>X</th>
        <th>Y</th>
      </tr>
      <tr>
        <td class="xcell" contenteditable="true"></td>
        <td class="ycell" contenteditable="true"></td>
      </tr>
      <tr>
        <td class="xcell" contenteditable="true"></td>
        <td class="ycell" contenteditable="true"></td>
      </tr>
      <tr>
        <td class="xcell" contenteditable="true"></td>
        <td class="ycell" contenteditable="true"></td>
      </tr>
      <tr>
        <td class="xcell" contenteditable="true"></td>
        <td class="ycell" contenteditable="true"></td>
      </tr>
    </table>
    <div id="addRowChild" class="add"><b>+</b></div>
  </div>

</div>

</div>

在我的 JS 代码中，我一直在尝试使用兄弟 () 方法从每个容器 div 中获取表，但它不起作用，我不知道为什么会这样。

function createNewTable() {
  let newTable = document.createElement("table")
  let mainContainer = document.getElementById("main-container") //refers to the div, containing all tables
  let containerDiv = document.createElement("div") //creates div, which contains table and row adding div
  let addRowButton = document.createElement("div") //creates row adding button

  mainContainer.append(containerDiv)
  containerDiv.id = "container"
  containerDiv.append(newTable)
  newTable.className = "my-table"
  newTable.id = "table"

  $("#addRowChild").click(function() {
    let table = $("#addRowChild").siblings(".my-table")
    table.append(`<tr><td class = "xcell" contenteditable = "true"></td><td class = "ycell" contenteditable = "true"></td></tr>`);
  });

【问题讨论】：

ID 应该是唯一的，您不能为每个容器重复使用 id="container"，为每个表重复使用 id="table"。
为什么每次创建新表时都要为#addRowChild添加另一个点击处理程序？
那么，我应该把它变成一个类吗？
我没有，这只是我对堆栈溢出的糟糕编辑
我注意到createNewTable 末尾缺少}，我猜它应该在点击处理程序之前。

标签： javascript html jquery

【解决方案1】：

该脚本无法运行，因为它嵌套了 click 事件处理程序方法和 createNewTable() 方法。应用截图和测试代码如下：

function createNewTable() 
{
    let newTable = document.createElement("table")
    let mainContainer = document.getElementById("main-container") //refers to the div, containing all tables
    let containerDiv = document.createElement("div") //creates div, which contains table and row adding div
    let addRowButton = document.createElement("div") //creates row adding button

    mainContainer.append(containerDiv);
    containerDiv.id = "container";
    containerDiv.append(newTable);
    newTable.className = "my-table";
    newTable.id = "table";
}

$("#addRowChild").click(function() {

    var markup = `
                    <tr>
                    <td class = "xcell" contenteditable="true">####</td>
                    <td class = "ycell" contenteditable="true">####</td>
                    </tr>
                `;

    let table = $("table tbody");
    table.append(markup);
});

table {
  font-family: arial, sans-serif;
  border-collapse: collapse;
  width: 100%;
}

td, th {
  border: 1px solid #dddddd;
  text-align: left;
  padding: 8px;
}

tr:nth-child(even) {
  background-color: #dddddd;
}

.block {
  display: block;
  width: 100%;
  border: none;
  background-color: #04AA6D;
  padding: 14px 28px;
  font-size: 16px;
  cursor: pointer;
  text-align: center;
}

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js" integrity="sha512-894YE6QWD5I59HgZOGReFYm4dnWc1Qt5NtvYSaNcOP+u1T9qYdvdihz0PPSiiqn/+/3e7Jo4EaG7TubfWGUrMQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
    <title>Document</title>
</head>
<body>
    <div id="main-container">
        <div id="container">
            <table id="table" class="my-table">
                <thead>
                    <tr>
                        <th>X</th>
                        <th>Y</th>
                    </tr>
                </thead>

                <tbody>
                    <tr>
                        <td class="xcell" contenteditable="true">1</td>
                        <td class="ycell" contenteditable="true">2</td>
                    </tr>
                </tbody>
            </table>
            <button style="margin-top: 25px;" class="block" id="addRowChild" class="add"><b>+</b></button>
        </div>
    </div>
</body>
</html>

【讨论】：