使用 DOM 和 ejs 从表中选择随机行答案

【问题标题】：Selecting Random row from a table using DOM and ejs使用 DOM 和 ejs 从表中选择随机行
【发布时间】：2021-10-26 14:39:33
【问题描述】：

这是我的代码 -

<tbody class = "tbody">
    <% for(var i = 0; i < users.length; i++) { %>
    <tr id="tr">
        <th><%= i + 1 %></th>
        <th><%= users[i].name %></th>
        <th><%= users[i].email %></th>
        <th><%= users[i].age %></th>
        <th><%= users[i].address %></th>
        <th><button class="update" data-id=<%= users[i]._id %>><i class="fas fa-edit"></i></button>         </th>
        <th><button class="delete" data-id=<%= users[i]._id %>><i class="fas fa-times"></i></button></th>
    </tr>
    <%}%>   
</tbody>

const deleteButton = document.querySelector(".delete")
    
deleteButton.addEventListener("click", () => {
    let id = deleteButton.getAttribute("data-id")
    alert("ok")
    console.log(id)
})

我想要的是当我点击任何删除图标时，警报应该会弹出，但是当我单击删除图标时，它仅适用于第一个。当我点击它们的其余部分时没有任何反应。

我不知道该怎么做！

【问题讨论】：

因为querySelector只返回匹配CSS选择器的first元素，所以只有第一个按钮绑定到事件监听器。
感谢解决方案

标签： javascript html dom html-table ejs

【解决方案1】：

您应该使用querySelectorAll 来获取具有该选择器的所有元素（在本例中为类）

您还需要为每个事件添加一个事件

这里我使用bind绑定按钮作为参数，但你可以使用其他你想要的方式，只是一个例子。

const buttons = document.querySelectorAll(".delete");

function onButtonClick(button, ev) {
    const id = button.getAttribute("data-id");
    button.classList.toggle("deleted-example");
    console.log({ id });
}

Array.from(buttons).forEach(button => {
    // use bind to bind button parameter
    button.addEventListener("click", onButtonClick.bind(null, button), true);
});

.deleted-example {
    color: red;
}

<div>
    <div class="delete" data-id="1">delete 1</div>
    <div class="delete" data-id="2">delete 2</div>
    <div class="delete" data-id="3">delete 3</div>
    <div class="delete" data-id="4">delete 4</div>
</div>

【讨论】：