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

最新推荐文章于 2021-02-01 16:54:12 发布

ZhangXD_BLOG

最新推荐文章于 2021-02-01 16:54:12 发布

阅读量1.5k

点赞数 1

分类专栏： JavaScript

本文链接：https://blog.csdn.net/u012054869/article/details/51607116

版权

JavaScript 专栏收录该内容

41 篇文章 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>

ZhangXD_BLOG

关注

1
点赞
踩
6

收藏

觉得还不错? 一键收藏
0
评论
javascript--动态添加表格（三种方法）

题目：用户输入行和列，动态创建表格：方法一：createElement()，创建标签（缺点：每创建表格在原来的基础上新建表格） &lt;!DOCTYPE html&gt;&lt;html lang="en"&gt;&lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;动态添加表格-createEl
复制链接

扫一扫

专栏目录