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

最新推荐文章于 2024-05-03 11:47:20 发布

RAYFUXK

最新推荐文章于 2024-05-03 11:47:20 发布

阅读量1.2k

点赞数

文章标签： javascript

本文链接：https://blog.csdn.net/RAYFUXK/article/details/121369289

版权

直接上代码，因为是用原生的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>

更多的js原生的API看这里 https://developer.mozilla.org/en-US/docs/Web/API/HTMLTableElement

RAYFUXK

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
用JavaScript动态的创建表格（table)

直接上代码，因为是用原生的JS写的，基本copy到一个html文件就能用<html><head></head><body><table id="show_cal_log" > <thead> <tr> <th>field1</th> </tr> </thead> <tbody>
复制链接

扫一扫