原生js 操作表格增删行和列

最新推荐文章于 2023-07-19 10:09:05 发布

wychen_sunshine

最新推荐文章于 2023-07-19 10:09:05 发布

阅读量2.9k

点赞数 1

分类专栏： javascript+css+html 文章标签： javascript

本文链接：https://blog.csdn.net/u012679583/article/details/50504055

版权

javascript+css+html 专栏收录该内容

51 篇文章 0 订阅

订阅专栏

本来觉得这个挺好做的，可是当自己动手写的时候，发现会出现各种各样的问题。。。若不是同学问我，估计还真的把这些给忘记了呢。。。不多说，上代码。

<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312"/>
    <title>无标题文档</title>
</head>
<body>
<input type="button" value="增加一行" onclick="addRow()"/>&nbsp;<input type="button" value="删除一行" onclick="deleteRow()"/>
<input type="button" value="增加一列" onclick="addCol()"/>&nbsp;<input type="button" value="删除一列" onclick="deleteCol()"/>

<script type="text/javascript">
    var table = document.createElement('table');
    table.id = 'testTable';
    table.border = 1;
    table.width = "50%";

    var tbody = document.createElement('tbody');
    table.appendChild(tbody);
    //添加行
    var addRow = function () {
        var rowLength = table.rows.length;
        tbody.insertRow(rowLength);
        var colLength = table.rows[0].cells.length;
        if (colLength < 1) {
            tbody.rows[0].insertCell(0);
            tbody.rows[0].cells[0].appendChild(document.createTextNode('cell0.0'));
        } else {
            for (var i = 0; i < colLength; i++) {
                tbody.rows[rowLength].insertCell(i);
                tbody.rows[rowLength].cells[i].appendChild(document.createTextNode('cell' + rowLength + '.' + i));
            }
        }
    }
    //删除行
    function deleteRow() {
        var rowLength = table.rows.length;
        if (rowLength < 1) {
            alert('table is null');
        } else {
            table.deleteRow(rowLength - 1);
        }
    }
    //增加列
    function addCol() {
        var rowLength = table.rows.length;
        var colLength;
        if (rowLength < 1) {
            tbody.insertRow(0);
            tbody.rows[0].insertCell(0);
            tbody.rows[0].cells[0].appendChild(document.createTextNode('cell0.0'));
        } else {
            colLength = table.rows[0].cells.length;
            for (var i = 0; i < rowLength; i++) {
                tbody.rows[i].insertCell(colLength);
                tbody.rows[i].cells[colLength].appendChild(document.createTextNode('cell' + i + '.' + colLength));
            }
        }
    }
    //删除列
    function deleteCol() {
        var rowLength = table.rows.length;
        var colLength;
        if (rowLength < 1) {
            alert('table is null');
        } else {
            colLength = table.rows[0].cells.length;
            if (colLength === 1) {
                while (tbody.hasChildNodes()) {
                    tbody.removeChild(tbody.firstChild);
                }
            } else {
                for (var i = 0; i < rowLength; i++) {
                    tbody.rows[i].deleteCell(colLength - 1);
                }
            }
        }
    }
    document.body.appendChild(table);
</script>
</body>
</html>

wychen_sunshine

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
原生js 操作表格增删行和列

本来觉得这个挺好做的，可是当自己动手写的时候，发现会出现各种各样的问题。。。若不是同学问我，估计还真的把这些给忘记了呢。。。不多说，上代码。<html><head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312"/> <title>无标题文档</title></head><body><in
复制链接

扫一扫