练习：动态创建表格

最新推荐文章于 2022-03-29 09:11:33 发布

越努力越

最新推荐文章于 2022-03-29 09:11:33 发布

阅读量236

点赞数

分类专栏： JavaScript 文章标签： javascript html

本文链接：https://blog.csdn.net/weixin_45353679/article/details/104642431

版权

JavaScript 专栏收录该内容

32 篇文章 0 订阅

订阅专栏

根据用户输入的行列数创建表格表格的每一行再增加一列删除列

<!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>
        td {
            padding: 10px;
        }
    </style>
</head>

<body>
    行数<input type="text" name="" id=""> 列数
    <input type="text" name="" id="">

    <input type="button" value="创建" />

    <script>
        // 根据行列数创建表格 表格的每一行再增加一列删除列

        //创建表格函数
        function createTable() {
            var newTable = document.createElement('table');
            newTable.id = 'newTable';
            newTable.setAttribute('border', 1);
            //获取需要创建表格的行列数
            var rowNum = document.getElementsByTagName('input')[0].value;
            var colNum = document.getElementsByTagName('input')[1].value;
            for (var i = 0; i < rowNum; i++) {
                //创建行
                var createRow = newTable.insertRow();
                for (var j = 0; j < colNum; j++) {
                    //创建列
                    var createCol = createRow.insertCell();
                    createCol.innerHTML = i + '--' + j;
                }
                //增加一列，删除此列所在的行
                var menuCol = createRow.insertCell();
                var deleteBtn = document.createElement('input');
                deleteBtn.type = 'button';
                deleteBtn.value = '删除此行'
                    // with(deleteBtn) {
                    //     type = 'button';
                    //     value = '删除此行';
                    // }
                deleteBtn.setAttribute('name', 'deleteRowBtn');
                menuCol.appendChild(deleteBtn);
            }


            document.body.appendChild(newTable);
        }
        //删除行数
        function deleteCurRow() {
            let rowNum = document.getElementsByTagName('input')[0].value;
            let newTable1 = document.querySelector('table');
            let deleteNum = document.getElementsByName('deleteRowBtn');
            //给每一个删除行 按钮绑定单机事件
            for (let k = 0; k < deleteNum.length; k++) {
                deleteNum[k].onclick = function() {
                    //获取当前按钮所在的行号
                    //var s = this.parentNode.parentNode.rowIndex;
                    //console.log(s);
                    //newTable1.deleteRow(s);
                    this.parentNode.parentNode.remove();
                }
            }
        }
        var createMyTable = document.getElementsByTagName('input')[2];
        createMyTable.onclick = function() {
            createTable();
            deleteCurRow();
        }
    </script>
</body>

</html>

效果图：

在这里插入图片描述

进阶

<body>
    行：<input type="text" name="" id="row">
    列：<input type="text" name="" id="col">
    <input type="button" value="创建" id="btn"/>
    <div id="box">
        <!-- <table>
            <tr>
                <td></td>
            </tr>
        </table> -->
    </div>
    <script>
        function $(id) {
            return document.getElementById(id);
        }

        function create(tagName) {
            return document.createElement(tagName);
        }

        $('btn').onclick = function() {
            var rValue = $('row').value;
            var cValue = $('col').value;
            var oTable = create('table');
            oTable.border = 1;
            for(var i = 0; i < rValue; i++) {
                var oTr = create('tr');
                for(var j = 0; j < cValue; j++) {
                    var oTd = create('td');
                    oTd.innerHTML = 'aaa';
                    oTr.appendChild(oTd);
                }
                // 再添加一列
                var endTd = create('td');
                endTd.innerHTML = '<a href="javascript:;">删除</a>';
                oTr.appendChild(endTd);
                oTable.appendChild(oTr);
            }
            $('box').appendChild(oTable);

            // 给删除绑定单击事件 删除元素是动态创建 事件绑定在函数内
            var as = $('box').getElementsByTagName('a');
            for(var i = 0; i < as.length; i++) {
                as[i].onclick = function() {
                    if ( confirm('你确定要删除吗?') ) {
                        this.parentNode.parentNode.remove();
                    }    
                }
            }
        }

        
        function push(arr,...val) {
            //var start = arr.length;
            for(var i = 0; i < val.length; i++) {
                arr[arr.length] = val[i];
            }
            return arr.length;
        } 
        var arr = [1,2,3];
        var len = push(arr,4,5,6,7);
        console.log(arr);
        console.log(len);
        
    </script>
</body>

越努力越

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
练习：动态创建表格

根据用户输入的行列数创建表格表格的每一行再增加一列删除列<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"&g...
复制链接

扫一扫

专栏目录