Why button doesn't append row to table?

Question

Sup! My code dynamically creates tables by clicking div, but it appends row only to first one. All tables are stored in div, containing the table itself and div with the row adding button, which is contained in the main 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>

In my JS code, I've been trying to get tables from each container div with siblings() method, but it doesn't work and I have no idea why it happens.

JS

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>`);
  });

IDs are supposed to be unique, you can't reuse `id="container"` for each container and `id="table"` for every table. — Barmar, Dec 21 '21 at 23:43
Why do you add another click handler to `#addRowChild` every time you create a new table? — Barmar, Dec 21 '21 at 23:45
I noticed there was a missing `}` at the end of `createNewTable`, I guess it's supposed to be before the click handler. — Barmar, Dec 21 '21 at 23:47

Sercan · Answer 1 · 2021-12-21T23:56:28.407

The script was not working because it nested the click event handler method and the createNewTable() method. Application screenshot and test code are available below:

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>

Why button doesn't append row to table?

1 Answers1