我有一个生成 DOM 表的函数。在表格中我有多个按钮。如果我生成多个表，我怎么知道在哪个表中按下了其中一个按钮。对于这个例子是向上按钮
const row3 = document.createElement("tr");
cell.appendChild(row3);
const buttonUp = document.createElement("button");
row3.appendChild(buttonUp);
buttonUp.addEventListener("click", function() {
temperatureRoom[numberRoom - 1] = temperatureRoom[numberRoom - 1] + 0.5;
row2.innerText = `New temperature: ${temperatureRoom[numberRoom-1]}`;
}, true);
buttonUp.addEventListener("click", InsertData, true);HTML：
<!DOCTYPE html>
<html>
<head>
<title>Home</title>
</head>
<body>
<button id="insert">Add a room</button>
<script type="module">
import { generateBox } from "http://localhost:8000/home.js";
var insertBtn = document.getElementById("insert"); insertBtn.addEventListener("click", generateBox, true);
</script>
</body>
</html>例如我用函数生成三个表，我怎么知道在哪个表中按下了向上按钮？
知道按钮在哪个表中被按下的一种方法是为每个表添加一个唯一标识符并将其作为数据属性附加到按钮。然后，在事件侦听器函数中，您可以检索标识符并使用它来确定单击了哪个表。
举个例子：
// Generate table
const table = document.createElement("table");
table.setAttribute("data-table-id", "1"); // Add unique identifier to table
// Generate row and button
const row3 = document.createElement("tr");
const cell = document.createElement("td");
const buttonUp = document.createElement("button");
buttonUp.setAttribute("data-table-id", "1"); // Add unique identifier to button
row3.appendChild(cell);
cell.appendChild(buttonUp);
// Add event listener to button
buttonUp.addEventListener("click", function(event) {
const tableId = event.target.getAttribute("data-table-id"); // Retrieve table identifier from button
temperatureRoom[numberRoom - 1] = temperatureRoom[numberRoom - 1] + 0.5;
row2.innerText = `New temperature: ${temperatureRoom[numberRoom-1]}`;
InsertData(tableId); // Pass table identifier to function
}, true);
在这个例子中，我们为表格和按钮都添加了一个data-table-id属性，值为1。当按钮被点击时，我们从按钮中检索data-table-id属性并传递它作为参数传递给 InsertData 函数，然后可用于确定单击了哪个表。
给你的表id（我通常使用数据属性）。然后在包含元素上使用 event delegation（这里我使用了
documentclosestdocument.addEventListener('click', handleClick);
function handleClick(e) {
if (e.target.matches('table button')) {
const { id } = e.target.closest('table').dataset;
console.log(id);
}
}table { border-collapse: collapse; }
table:not(:last-child) { margin-bottom: 1em; }
td { border: 1px solid lightgray; padding: 0.25em; }<h4>People</h4>
<table data-id="people">
<thead>
<tr><td>Name</td><td>Age</td><td></td></tr>
</thead>
<tbody>
<tr><td>Bob</td><td>12</td><td><button type="button">Click</button></td></tr>
<tr><td>Sue</td><td>23</td><td><button type="button">Click</button></td></tr>
</tbody>
</table>
<h4>Types</h4>
<table data-id="types">
<thead>
<tr><td>Type</td><td>Value</td><td></td></tr>
</thead>
<tbody>
<tr><td>Animal</td><td>12</td><td><button type="button">Click</button></td></tr>
<tr><td>Tree</td><td>23</td><td><button type="button">Click</button></td></tr>
</tbody>
</table>