javascript--动态添加表格（三种方法）

向右看齐 2022-08-23 04:57 241阅读 0赞

题目：用户输入行和列，动态创建表格：

方法一：createElement()，创建标签（缺点：每创建表格在原来的基础上新建表格）

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>动态添加表格-createElement方法</title>
    </head>
    <body>
    <form>
        行：<input type="text" id="col">
        列：<input type="text" id="row">
        <input type="button"  value="创建表格"  onclick="creatTable()"><br/>
    </form>
    <table border="1" style="width:500px;height: 500px;background:pink;" id="tab"></table>
    <script>
        var table=document.getElementById("tab");
        function creatTable(){
            var col=document.getElementById("col").value;
            var row=document.getElementById("row").value;
            for(var n=0;n<col;n++){
                //创建<tr></tr>标签
                var hang=document.createElement("tr");
                for(var m=0;m<row;m++){
                    //创建<td></td>标签
                    var lie=document.createElement("td");
                    //将列元素添加到行元素中。形式：<tr><td></td><td></td>........</tr>
                    hang.appendChild(lie);
                }
                //将行元素添加到表格中
                table.appendChild(hang);
            }
        }
    </script>
    </body>
    </html>

方法二：标签拼接（无以上缺点）

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>动态添加表格-标签拼接</title>
    </head>
    <body>
    <form>
        行：<input type="text" id="col">
        列：<input type="text" id="row">
        <input type="button"  value="创建表格"  onclick="creatTable()"><br/>
    </form>
    <table border="1" style="width:500px;height: 500px;background:pink;" id="tab"></table>
    <script>
        var table=document.getElementById("tab");
        function creatTable(){
            var col=document.getElementById("col").value;
            var row=document.getElementById("row").value;
            var str="";
            for(var n=0;n<col;n++){
                //表格行元素的开始标记<tr>
                str=str+"<tr>";
                for(var m=0;m<row;m++){
                    //表格列标签<td></td>
                    str=str+"<td>"+"</td>";
                }
                //表格行元素的结束标记</tr>
                str=str+"</tr>";
                table.innerHTML=str;
            }
        }
    </script>
    </body>
    </html>

方法三：标签拼接+变量指向函数（var 变量名=函数名;）无以上缺点

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>动态添加表格</title>
    </head>
    <body>
    <form>
        行：<input type="text" id="col">
        列：<input type="text" id="row">
        <input type="button"  value="创建表格"  onclick="fun()"><br/>
    </form>
    <table border="1" style="width:500px;height: 500px;background:pink;" id="tab"></table>
    <script>
        var table=document.getElementById("tab");
        //第四步：creatTable()函数接收，进行传参（写上传参的值）
        function creatTable(col,row){
            var str="";
            for(var n=0;n<col;n++){
                //表格行元素的开始标记<tr>
                str=str+"<tr>";
                for(var m=0;m<row;m++){
                    //表格列标签<td></td>
                    str=str+"<td>"+"</td>";
                }
                //表格行元素的结束标记</tr>
                str=str+"</tr>";
                table.innerHTML=str;
            }
        }
        //第三步：对象指向函数
        var obj=creatTable;//不加括号
        //第一步：点击函数：定义变量获取两个的值
        function fun(){
            var col=document.getElementById("col").value;
            var row=document.getElementById("row").value;
            //第二步：传参，将两个值传给变量
            obj(col,row);
        }
    </script>
    </body>
    </html>