添加、删除table表格中的行和列_td添加删除列-优快云博客

本文链接：https://blog.youkuaiyun.com/weixin_44523717/article/details/99575212

本文介绍了一个使用HTML、CSS和JavaScript实现的动态表格操作示例。通过点击按钮，用户可以添加、删除表格，以及增加和删除表格的行和列。此功能适用于需要用户自定义表格结构的应用场景。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        #mytable {
            margin-top: 20px;
        }
    </style>
</head>

<body>
    <button onclick="aa()">点击添加表格</button>
    <div id="box">
        <!-- <table frame="border" rules="all" id="mytable">
                        <caption>测试表</caption>
                        <tr>
                        <td>单元格</td><td>单元格</td>
                        </tr>
            </table> -->

    </div>

    <div id="container">

    </div>
    <script>
        let i = 0;
        function aa() {
            let box = document.getElementById('box');
            let str = '';
            str += `
        <table frame="border" rules="all" id="mytable">
                        <tr>
                        <td>单元格</td><td>单元格</td>
                       
                        </tr>
                        <tr>
                        <td>单元格</td><td>单元格</td>
                       
                        </tr>
                        <tr>
                        <td>单元格</td><td>单元格</td>
                       
                        </tr>
        </table>
        <p><input type="button" value="增加行" οnclick="addrow()" >&nbsp&nbsp<input type="button" value="删除行" οnclick="delrow()">&nbsp&nbsp
        <input type="button" value="增加列" οnclick="addcol()">&nbsp&nbsp<input type="button" value="删除列" οnclick="delcol()"></p>
        

        `;
            box.innerHTML += str;
            let eles = box.querySelectorAll('table');
            console.log(eles);
            eles.forEach(function (v, i) {
                v.setAttribute('id', 'mytable-' + (i + 1))
            })

        }


        function addrow(event) {
            let ev = event || window.event,
             tag=ev.target.parentNode.previousElementSibling;
             console.log(tag);
             var c = tag;
            console.log(c);
            if (c.rows.length == 0) {//如果是向一个空表增加一行
                var x = c.insertRow(-1);//向空表插入一行
                var y = x.insertCell(-1);//向新行插入一列
                y.innerHTML = " ";
            }
            else {
                var z = c.rows[0].cells;//如果不是空表，首先获得表格有多少列，先获取再插入新行
                var x = c.insertRow(-1);
                for (var i = 0; i < z.length; i++) {//依次向新行插入表格列数的单元格
                    var y = x.insertCell(i);
                    y.innerHTML = " " + i;
                }
            }
        }

        function delrow(event) {
            let ev = event || window.event,
             tag=ev.target.parentNode.previousElementSibling;
             console.log(tag);
            // var x = document.getElementById(tag);
            let x=tag;
            x.deleteRow(-1);//删除一行
        }

        function addcol(event) {
            let ev = event || window.event,
             tag=ev.target.parentNode.previousElementSibling;
             console.log(tag);
            
            var c = tag;//获取表格信息
            var len = c.rows.length;//获得行数
            var ro = c.rows[0].cells;
            var len2 = ro.length;//获得列数
            for (var i = 0; i < len; i++) {
                var x = c.rows[i].insertCell(len2);//依次向每一行的末尾插入一个新列
                x.innerHTML = " " + len2;
            }
        }
        function delcol(event) {
            let ev = event || window.event,
             tag=ev.target.parentNode.previousElementSibling;
             console.log(tag);
           
            var c = tag;//获取表格信息
            var len = c.rows.length;//获取表格的行数
            var ro = c.rows[0].cells//获取表格的列数
            var len2 = ro.length - 1;
            for (var i = 0; i < len; i++) {
                var x = c.rows[i].deleteCell(len2);//删除每一行末尾的单元格
            }

        }


    </script>

</body>

</html>