js控制为table添加一行

在JavaScript中，控制表格（<table>）添加一行通常涉及DOM操作。以下是基础概念及相关操作：

基础概念

DOM（Document Object Model）：表示HTML文档的结构化树形模型，允许JavaScript进行操作。
Node：DOM树中的基本单元，可以是元素节点、文本节点等。
appendChild()：将一个节点添加到指定父节点的子节点列表的末尾。

优势

动态性：可以在不刷新页面的情况下更新表格内容。
交互性：提升用户体验，使页面更加生动。

类型

客户端动态添加：通过JavaScript在客户端浏览器中操作DOM。
服务器端动态生成：通过后端语言（如Node.js）生成HTML并发送到客户端。

应用场景

动态数据展示：如从API获取数据后动态更新表格。
用户交互：如点击按钮添加一行数据。

示例代码

以下是一个简单的示例，展示如何使用JavaScript向表格添加一行：

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

    <script>
        function addRow() {
            // 获取表格元素
            var table = document.getElementById("myTable");

            // 创建新行
            var row = table.insertRow(-1); // 在表格末尾插入新行

            // 创建新单元格并添加内容
            var cell1 = row.insertCell(0);
            var cell2 = row.insertCell(1);
            cell1.innerHTML = "New Name";
            cell2.innerHTML = "25";
        }
    </script>
</body>
</html>