如何制作一个在单击时创建按钮的按钮（在 HTML 和 JavaScript 中）？

Question

基本上是这个问题。 我的代码（如下）很长而且可能很糟糕，因为我对编码很陌生。 我知道我应该将 JavaScript 和 HTML 放在不同的文档中，但我更喜欢这样。 我想做的是创建一个表格，当用户输入一列时，该列旁边会出现一个按钮，让他们可以选择删除它，如果他们犯了错误。

 document.getElementById("add").onclick = function() { var node = document.createElement("Tr"); document.getElementById("list").appendChild(node); var node = document.createElement("Td"); var text = document.getElementById("w").value; var textnode = document.createTextNode(text); node.appendChild(textnode); document.getElementById("list").appendChild(node); var node = document.createElement("Td"); var text = document.getElementById("m").value; var textnode = document.createTextNode(text); node.appendChild(textnode); document.getElementById("list").appendChild(node); var node = document.createElement("Td"); var text = document.getElementById("p").value; var textnode = document.createTextNode(text); node.appendChild(textnode); document.getElementById("list").appendChild(node); }

 <table id="list"> <tr> <th scope="col">Word</th> <th scope="col">English</th> <th scope="col">Pronunciation</th> </tr> <tfoot> <tr> <div class="boxy_bois"> <td><input type="text" id="w" class="w" required/></td> <td><input type="text" id="m" class="m" required/></td> <td><input type="text" id="p" class="p" /></td> </div> </tr> </tfoot> </table> <div class="button_boi"> <button class="button_boi" id="add">Enter</button> </div>

Answer 1

在你的 Javascript 中使用 JQuery 库可以用非常简单和简短的代码为你省去所有的麻烦

$("#add").on("click", function(){
    $("#list").html("your button element here");
});

删除它

$("#yourbuttonID").on("click", function(){
    $(this).remove();
});

Answer 2

您的代码创建了不正确的 HTML 结果。 它变成<tr></tr><td></td>...而不是<tr><td></td>...</tr> 。

使用当前的 JavaScript，您可以使用字符串创建新元素并使用insertAdjacentHTML()插入现有的 HTML。 它比创建 DOM 对象和appendChild()容易得多。

 document.getElementById("add").onclick = function() { let listTable = document.getElementById("list"); let tfoot = listTable.querySelector('tfoot'); let wordValue = document.getElementById("w").value; let engValue = document.getElementById("m").value; let pronunValue = document.getElementById("p").value; let trHTML = '<tr>' + '<td>' + wordValue + '</td>' + '<td>' + engValue + '</td>' + '<td>' + pronunValue + '<button class="deletethis" type="button" title="delete this row">x</button></td>' + '</tr>'; tfoot.insertAdjacentHTML('beforebegin', trHTML); } // use event delegation to listen on click delete row. document.addEventListener('click', (e) => { let thisTarget = e.target; let thisBtn = thisTarget.closest('.deletethis'); if (thisBtn) { // if correct button then delete the whole table row (tr). e.preventDefault(); thisTarget.closest('tr').remove(); } });

 <table id="list"> <tr> <th scope="col">Word</th> <th scope="col">English</th> <th scope="col">Pronunciation</th> </tr> <tfoot> <tr> <div class="boxy_bois"> <td><input type="text" id="w" class="w" required /></td> <td><input type="text" id="m" class="m" required /></td> <td><input type="text" id="p" class="p" /></td> </div> </tr> </tfoot> </table> <div class="button_boi"> <button class="button_boi" id="add">Enter</button> </div>

从上面的代码中，我使用新的querySelector()和closest()来选择邻近的元素。

我使用事件委托来检测删除行按钮被单击然后删除整个tr因为新创建的元素在使用普通addEventListener时无法检测到。