如何用HTML和JavaScript实现点击按钮新增表格行并生成删除按钮

你偏好单文件编写的形式完全可以，不需要强行拆分JS和HTML文件。下面是修正后可直接运行的完整代码，同时修复了你原有代码的结构问题，实现新增行自带删除按钮的需求：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>单词表格</title>
    <style>
        table {
            border-collapse: collapse;
            width: 600px;
            margin: 20px 0;
        }
        th, td {
            border: 1px solid #ccc;
            padding: 8px;
            text-align: left;
        }
        .button_boi {
            padding: 6px 16px;
            cursor: pointer;
        }
        .del-btn {
            padding: 4px 12px;
            cursor: pointer;
        }
        input {
            width: 100%;
            box-sizing: border-box;
            padding: 4px;
        }
    </style>
</head>
<body>
<table id="list">
    <thead>
        <tr>
            <th scope="col">Word</th>
            <th scope="col">English</th>
            <th scope="col">Pronunciation</th>
            <th scope="col">操作</th>
        </tr>
    </thead>
    <tbody id="content">
        <!-- 新增的内容行会插到这里 -->
    </tbody>
    <tfoot>
        <tr>
            <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>
            <td></td>
        </tr>
    </tfoot>
</table>
<div>
    <button class="button_boi" id="add">Enter</button>
</div>

<script>
document.getElementById("add").onclick = function() {
    // 获取输入框的值
    const wordVal = document.getElementById("w").value.trim();
    const meaningVal = document.getElementById("m").value.trim();
    const proVal = document.getElementById("p").value.trim();

    // 简单校验必填项
    if (!wordVal || !meaningVal) {
        alert("Word和English为必填项");
        return;
    }

    // 创建新行
    const newTr = document.createElement("tr");

    // 填充三个内容单元格
    const wordTd = document.createElement("td");
    wordTd.textContent = wordVal;
    newTr.appendChild(wordTd);

    const meaningTd = document.createElement("td");
    meaningTd.textContent = meaningVal;
    newTr.appendChild(meaningTd);

    const proTd = document.createElement("td");
    proTd.textContent = proVal;
    newTr.appendChild(proTd);

    // 创建删除按钮单元格
    const opTd = document.createElement("td");
    const delBtn = document.createElement("button");
    delBtn.className = "del-btn";
    delBtn.textContent = "删除";
    // 绑定删除事件：点击时删除当前行
    delBtn.onclick = function() {
        newTr.remove();
    }
    opTd.appendChild(delBtn);
    newTr.appendChild(opTd);

    // 把新行加到内容区
    document.getElementById("content").appendChild(newTr);

    // 清空输入框
    document.getElementById("w").value = "";
    document.getElementById("m").value = "";
    document.getElementById("p").value = "";
}
</script>
</body>
</html>

主要改动说明 #

• 修复了原代码的DOM结构错误：之前你创建tr后，没有把后续生成的td挂到这个tr下，反而全部直接插到table节点上，会导致表格渲染完全错乱
• 修正了原HTML的不规范写法：<tr>标签的直接子元素只能是<th>或<td>，去掉了tfoot里嵌套的多余div，同时补了thead、tbody分区，表格结构更符合规范
• 新增行自动在最后一列生成删除按钮，点击即可删除对应整行
• 加了简单的必填项校验，新增完成后自动清空输入框，使用体验更好
• 所有代码（HTML、CSS、JS）都在同一个文件里，不需要拆分外部文件，符合你的使用习惯

内容的提问来源于stack exchange，提问作者Mariana_the_Mermaid