用JavaScript动态的创建表格（table)

最新推荐文章于 2024-05-03 16:01:29 发布

原创最新推荐文章于 2024-05-03 16:01:29 发布 · 1.4k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#javascript

本文介绍了一个使用原生JavaScript实现的动态表格，该表格能够自动添加和删除行。通过简单的HTML结构结合JavaScript代码，实现了对表格数据的有效管理。

直接上代码，因为是用原生的JS写的，基本copy到一个html文件就能用

<html>
<head>
</head>
<body>
<table id="show_cal_log" >
    <thead>
        <tr>
            <th>field1</th>
        </tr>
    </thead>
    <tbody>
    </tbody>
    <button onclick="addRow()">新增一行</button>
</table>
<script type="text/javascript">
    let i = 0
    init();
    function init() {
        let tableDom = document.getElementById("show_cal_log");
        let tbody = tableDom.tBodies[0];
        // 清空原来的表格数据，如果是首次建表就不用这里代码
        for (let i = 0, l = tbody.rows.length; i < l; i++) {
            tbody.deleteRow(0);
        }
        // 往表里新增数据
        for (; i < 10; i++) {
            let tmpRow = tbody.insertRow(i);i
            tmpRow.insertCell(0).appendChild(document.createTextNode(i));
        }
    }

    function addRow() {
        let tableDom = document.getElementById("show_cal_log");
        let tbody = tableDom.tBodies[0];
        let tmpRow = tbody.insertRow(tbody.rows.length);
        tmpRow.insertCell(0).appendChild(document.createTextNode(++i));
    }
</script>
</body>
</html>