javascript--动态添加表格(三种方法)

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/u012054869/article/details/51607116

题目:用户输入行和列,动态创建表格:
 

方法一: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="创建表格"  οnclick="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="创建表格"  οnclick="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="创建表格"  οnclick="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>
展开阅读全文

没有更多推荐了,返回首页