js动态添加删除行

在JavaScript中，动态添加和删除表格行是常见的操作，通常用于实现动态数据展示或交互式表格。以下是相关的基础概念、优势、类型、应用场景以及常见问题的解决方案。

基础概念

动态添加和删除行主要涉及DOM（文档对象模型）操作。通过JavaScript，可以直接操作HTML元素，添加新的<tr>（表格行）元素或删除现有的行。

优势

用户体验：用户可以根据需要添加或删除数据，提高交互性。
灵活性：可以根据不同的数据源动态生成表格内容。
节省资源：不需要预先加载所有数据，按需加载，提高页面性能。

类型

添加行：通过JavaScript创建新的<tr>元素并插入到表格中。
删除行：通过JavaScript移除指定的<tr>元素。

应用场景

动态表单：用户可以添加或删除表单项。
数据管理：用户可以添加或删除数据记录。
交互式报表：根据用户选择动态显示数据。

示例代码

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Dynamic Table</title>
</head>
<body>
    <table id="myTable" border="1">
        <tr>
            <th>Name</th>
            <th>Age</th>
            <th>Action</th>
        </tr>
    </table>
    <button onclick="addRow()">Add Row</button>

    <script src="script.js"></script>
</body>
</html>

JavaScript (script.js)

function addRow() {
    const table = document.getElementById("myTable");
    const row = table.insertRow(-1); // Insert at the end

    const cell1 = row.insertCell(0);
    const cell2 = row.insertCell(1);
    const cell3 = row.insertCell(2);

    cell1.innerHTML = "New Name";
    cell2.innerHTML = "New Age";
    cell3.innerHTML = '<button onclick="deleteRow(this)">Delete</button>';
}

function deleteRow(btn) {
    const row = btn.parentNode.parentNode;
    row.parentNode.removeChild(row);
}

常见问题及解决方案

问题1：添加的行没有正确显示

原因：可能是DOM操作不正确，或者样式问题。 解决方案：确保insertRow和insertCell方法正确调用，并检查CSS样式。

问题2：删除行时出现错误

原因：可能是事件绑定不正确，或者DOM结构变化导致选择器失效。 解决方案：确保事件绑定在动态添加的元素上，并使用this关键字正确引用当前元素。

问题3：性能问题

原因：频繁的DOM操作可能导致性能下降。 解决方案：使用文档片段（DocumentFragment）批量操作DOM，减少重绘和回流。

function addMultipleRows() {
    const table = document.getElementById("myTable");
    const fragment = document.createDocumentFragment();

    for (let i = 0; i < 10; i++) {
        const row = document.createElement("tr");

        const cell1 = document.createElement("td");
        cell1.textContent = `Name ${i}`;
        row.appendChild(cell1);

        const cell2 = document.createElement("td");
        cell2.textContent = `Age ${i}`;
        row.appendChild(cell2);

        const cell3 = document.createElement("td");
        cell3.innerHTML = '<button onclick="deleteRow(this)">Delete</button>';
        row.appendChild(cell3);

        fragment.appendChild(row);
    }

    table.appendChild(fragment);
}

通过以上方法，可以有效地实现JavaScript动态添加和删除表格行的功能，并解决常见的操作问题。