基于JS/JQuery的表格动态增行及删除按钮显示问题排查

在Django表单开发场景中，通过addrow按钮为id为interface-table的表格动态添加行，需求为：除表格首行外，每行的首个单元格需包含Delete按钮。但目前新增行均未显示删除按钮，克隆行时似乎始终复制无删除按钮的首行，附上相关代码并寻求解决思路。

原代码 #

HTML代码 #

<table class="interface-table" id="interface-table">
    <tr class="row-interfaces main-table-header">
        <th colspan="2" class="head-row"></th>
        <th colspan="5" class="head-row">a</th>
        <th colspan="5" class="head-row">b</th>
        <th colspan="5" class="head-row">c</th>
        <th colspan="5" class="head-row">d</th>
    </tr>
    <tr class="row-interfaces secondary-table-header">
        <th colspan="1" class="sz-1">Delete</th>
        <th colspan="1" class="sz-1">e</th>
        <th colspan="1" class="sz-1">f</th>
        <th colspan="2" class="sz-2">g</th>
        <th colspan="2" class="sz-2">h</th>
        <th colspan="3" class="sz-3">i</th>
        <th colspan="2" class="sz-2">j</th>
        <th colspan="1" class="sz-1">k</th>
        <th colspan="2" class="sz-2">l</th>
        <th colspan="2" class="sz-2">m</th>
        <th colspan="3" class="sz-3">n</th>
        <th colspan="2" class="sz-2">o</th>
    </tr>

    {% for form in ipforms %}
    <tr id="new-row" class="row-interfaces secondary-table-header">
        {% if not forloop.first %}
        <th colspan="1" class="sz-1" id="col0">
            <button type="button" class="btn delete-btn remove_row" onclick="deleteRow(this)">Delete</button>
        </th>
        {% else %}
        <th colspan="1" class="sz-1"></th>
        {% endif %}
        <th colspan="1" class="sz-1" id="col1"> {{form.e}} </th>
        <th colspan="1" class="sz-1" id="col2">{{form.f}}</th>
        <th colspan="2" class="sz-2" id="col3">{{form.g}}</th>
        <th colspan="2" class="sz-2" id="col4"></th>
        <th colspan="3" class="sz-3" id="col5">{{form.i}}</th>
        <th colspan="2" class="sz-2" id="col6">{{form.j}}</th>
        <th colspan="1" class="sz-1" id="col7">{{form.k}}</th>
        <th colspan="2" class="sz-2" id="col8">{{form.l}}</th>
        <th colspan="2" class="sz-2" id="col9"></th>
        <th colspan="3" class="sz-3" id="col10">{{form.n}}</th>
        <th colspan="2" class="sz-2" id="col11">{{form.o}}</th>
    </tr>
    {% endfor %}
</table>

JS代码 #

function addRow() {
    var table = document.getElementById("interface-table");
    var newRow = document.getElementById("new-row").cloneNode(true);
 
    newRow.removeAttribute("id");
    var deleteCell = newRow.querySelector(".sz-1");
    deleteCell = document.getElementById("col0").innerHTML;
    table.appendChild(newRow);
}

function deleteRow(button) {
    var row = button.parentNode.parentNode;
    row.parentNode.removeChild(row);
}

问题根源分析 #

1. ID重复导致克隆目标错误：Django模板循环中所有数据行都使用了id="new-row"，而DOM中ID必须唯一，实际只会获取到第一行（无删除按钮的首行）进行克隆。
2. DOM操作无效：JS中deleteCell = document.getElementById("col0").innerHTML;只是将变量赋值为字符串，并未将删除按钮的HTML插入到克隆行的单元格中。
3. 单元格ID重复：所有行的单元格都使用相同的ID（如col0、col1），违反DOM规范，会导致后续选择元素出错。

修正方案及代码 #

修正后的HTML代码 #

<table class="interface-table" id="interface-table">
    <tr class="row-interfaces main-table-header">
        <th colspan="2" class="head-row"></th>
        <th colspan="5" class="head-row">a</th>
        <th colspan="5" class="head-row">b</th>
        <th colspan="5" class="head-row">c</th>
        <th colspan="5" class="head-row">d</th>
    </tr>
    <tr class="row-interfaces secondary-table-header">
        <th colspan="1" class="sz-1">Delete</th>
        <th colspan="1" class="sz-1">e</th>
        <th colspan="1" class="sz-1">f</th>
        <th colspan="2" class="sz-2">g</th>
        <th colspan="2" class="sz-2">h</th>
        <th colspan="3" class="sz-3">i</th>
        <th colspan="2" class="sz-2">j</th>
        <th colspan="1" class="sz-1">k</th>
        <th colspan="2" class="sz-2">l</th>
        <th colspan="2" class="sz-2">m</th>
        <th colspan="3" class="sz-3">n</th>
        <th colspan="2" class="sz-2">o</th>
    </tr>

    {% for form in ipforms %}
    <tr class="row-interfaces secondary-table-header {% if forloop.first %}first-row{% else %}form-row{% endif %}">
        {% if not forloop.first %}
        <th colspan="1" class="sz-1 delete-col">
            <button type="button" class="btn delete-btn remove_row" onclick="deleteRow(this)">Delete</button>
        </th>
        {% else %}
        <th colspan="1" class="sz-1 delete-col"></th>
        {% endif %}
        <th colspan="1" class="sz-1"> {{form.e}} </th>
        <th colspan="1" class="sz-1">{{form.f}}</th>
        <th colspan="2" class="sz-2">{{form.g}}</th>
        <th colspan="2" class="sz-2"></th>
        <th colspan="3" class="sz-3">{{form.i}}</th>
        <th colspan="2" class="sz-2">{{form.j}}</th>
        <th colspan="1" class="sz-1">{{form.k}}</th>
        <th colspan="2" class="sz-2">{{form.l}}</th>
        <th colspan="2" class="sz-2"></th>
        <th colspan="3" class="sz-3">{{form.n}}</th>
        <th colspan="2" class="sz-2">{{form.o}}</th>
    </tr>
    {% endfor %}
</table>

修正后的JS代码 #

function addRow() {
    var table = document.getElementById("interface-table");
    // 获取所有带删除按钮的数据行
    var formRows = table.querySelectorAll(".form-row");
    var newRow;

    if (formRows.length > 0) {
        // 克隆最后一个已存在的带删除按钮的行
        newRow = formRows[formRows.length - 1].cloneNode(true);
        // 重置表单控件值，避免保留原数据
        resetFormRow(newRow);
    } else {
        // 如果没有带删除按钮的行，克隆首行并手动添加删除按钮
        newRow = table.querySelector(".first-row").cloneNode(true);
        newRow.classList.remove("first-row");
        newRow.classList.add("form-row");
        var deleteCell = newRow.querySelector(".delete-col");
        deleteCell.innerHTML = '<button type="button" class="btn delete-btn remove_row" onclick="deleteRow(this)">Delete</button>';
        resetFormRow(newRow);
    }

    table.appendChild(newRow);
}

function deleteRow(button) {
    // 用closest更可靠地获取当前行
    var row = button.closest("tr");
    // 禁止删除首行
    if (row && !row.classList.contains("first-row")) {
        row.remove();
    }
}

// 辅助函数：重置行内表单控件的值
function resetFormRow(row) {
    var inputs = row.querySelectorAll("input, select, textarea");
    inputs.forEach(input => {
        switch (input.type) {
            case "checkbox":
            case "radio":
                input.checked = false;
                break;
            default:
                input.value = "";
                break;
        }
    });
}

修正说明 #

1. 去除重复ID：移除行和单元格的重复ID，改用class标识不同类型的行和单元格，避免DOM选择冲突。
2. 正确选择克隆目标：优先克隆已有的带删除按钮的行，确保克隆的行自带删除按钮；若不存在则克隆首行并手动插入删除按钮。
3. 修复DOM赋值逻辑：直接操作单元格的innerHTML插入删除按钮，确保生效。
4. 优化删除逻辑：使用closest方法定位行，同时禁止删除首行，避免误操作。
5. 新增表单重置：克隆后清空行内表单控件的值，避免新增行保留原数据。

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