JS插入节点实现创建表格

<html xmlns="http://www.w3.org/1999/xhtml">  
<head>  
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  
<title>自动创建表格</title>  
    <style type="text/css">  
        table{  
            width:300px;  
            height:100px;  
            border:#000 1px solid;  
            border-collapse:collapse;  
            }  
    </style>   
</head>  
<body>  
    <input type="text" id="line">行数<br>  
    <input type="text" id="list">列数<br>  
    <input type="button" value="添加表格" onclick="autocreate()">  
    <div id="d1" style="height:400px; width:300px;"></div>  
</body>
<script type="text/javascript" language="javascript">  
function autocreate(){  
    //创建table表格  
    var table=document.createElement("table");  
    table.setAttribute("border","10");  
    // table.setAttribute("background","red");  
    //获取行数值  
    var line=document.getElementById("line").value;  
    //获取列数值  
    var list=document.getElementById("list").value;

    for(var i=0;i<line;i++){  
        //alert(line);  
        //创建tr  
        var tr=document.createElement("tr");  
        for(var j=0;j<list;j++){  
            //alert(list);  
            //创建td  
            var td=document.createElement("td");  
            tr.appendChild(td);  
            }  
            table.appendChild(tr);  
        }  
        document.getElementById("d1").appendChild(table);  
    }  
</script>   
</html>
最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

推荐阅读更多精彩内容