js 表格

作者：战神再世发布日期:2025-12-15 浏览:12

<!DOCTYPE html>
<html>
<head>
    <title>JS 表格示例</title>
    <style>
        table {
            width: 100%;
            border-collapse: collapse;
        }
        th, td {
            border: 1px solid black;
            padding: 8px;
            text-align: left;
        }
        th {
            background-color: #f2f2f2;
        }
    </style>
</head>
<body>

<h2>使用 JavaScript 动态生成表格</h2>

<table id="myTable">
    <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 结构：我们创建了一个包含表头的表格，并在页面上放置了一个按钮用于触发 addRow 函数。
CSS 样式：简单的样式设置，使得表格看起来更整洁。
JavaScript 功能：通过 addRow 函数，每次点击按钮时会在表格中插入一行新数据。该函数使用了 DOM 操作方法，如 insertRow 和 insertCell 来动态生成表格行和单元格，并为其设置内容。

这样你就可以通过点击按钮来动态地向表格中添加新行了。

上一篇：js 获取高度

下一篇：js checkbox选中