Question

我有一个简单的 html 表，想动态地向其中添加行。表格的某些单元格是我为其设置了 onclick 事件的按钮。在侦听器函数中，我只记录 hello。问题是，当我按下按钮时，它会在控制台上打印 123，然后页面和控制台会自动刷新。

这是我的代码：

let row= document.getElementById("table-body"); 
let cell = row.insertCell(0);
let serial = 123;
cell.innerHTML = "<button" + " onclick='removeServiceMap( " + serial + " )' " + ">" + "حذف" + "</button>";

和removeServiceMap函数如下：

function removeServiceMap (serial) {
     console.log(serial);
}

有人知道这段代码有什么问题吗？

Answer 1

您想使用以下元素制作元素：

const elm = document.createElement("tag");

然后您可以使用以下方法为其添加事件侦听器：

elm.addEventListener("click", (e) => {
    console.log(e.target.textContent);
});

如果要删除该行，只需选择父项并将其删除即可。

elm.addEventListener("click", (e) => {
    console.log(e.target.parentElement.remove());
});

要将您制作的元素添加到 DOM，请选择一个元素并使用 appendChild();

document.querySelector(selector).appendChild(element);

Answer 2

<块引用>

它在控制台打印 123 然后页面和控制台自动刷新

很可能，您的表格位于 form 元素内，因此该按钮充当 submit 按钮。

您能否也分享一下 HTML 代码？如果可以帮助人们更好地了解您的问题。谢谢！

javascript 按钮事件无法正常工作

2 个答案: