js table 添加行

作者：殇丶離別发布日期:2025-09-26 浏览:40

<!DOCTYPE html>
<html>
<head>
    <title>JS Table 添加行</title>
</head>
<body>
    <table id="myTable" border="1">
        <tr>
            <th>姓名</th>
            <th>年龄</th>
            <th>职业</th>
        </tr>
    </table>
    <button onclick="addRow()">添加行</button>

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

            // 创建新行
            var newRow = table.insertRow();

            // 创建单元格
            var cell1 = newRow.insertCell(0);
            var cell2 = newRow.insertCell(1);
            var cell3 = newRow.insertCell(2);

            // 设置单元格内容
            cell1.innerHTML = "张三";
            cell2.innerHTML = "25";
            cell3.innerHTML = "工程师";
        }
    </script>
</body>
</html>

解释说明：

HTML结构：创建了一个简单的表格 (<table>) 和一个按钮 (<button>)，点击按钮会调用 addRow() 函数。
JavaScript代码：
- document.getElementById("myTable")：获取表格元素。
- table.insertRow()：在表格中插入一行。
- newRow.insertCell(0)、newRow.insertCell(1)、newRow.insertCell(2)：为新行插入三个单元格。
- cell1.innerHTML、cell2.innerHTML、cell3.innerHTML：设置每个单元格的内容。

每次点击“添加行”按钮时，会在表格的末尾添加一行包含固定内容的新行。

上一篇：js 多行文本

下一篇：js select 选中