js动态生成表格实例

℡梦醒时分

于 2019-12-27 12:04:10 发布

阅读量308

点赞数

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

本文链接：https://blog.youkuaiyun.com/spc007spc/article/details/103729751

版权

JavaScript 专栏收录该内容

8 篇文章

订阅专栏

本文介绍了如何使用JavaScript动态创建HTML表格。通过获取行列数值并运用for循环，详细展示了生成表格的具体步骤和代码实现。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

效果图
在这里插入图片描述
代码

<!DOCTYPE html>
<html>
<body>
<div>
        <h1>动态生成表格</h1>
        <div id="table1">
            行：<input type="text" id="h"/>
            列：<input type="text" id="l"/>
            <input type="button" value="生成" onclick="addTable();" />
            <div id="divt"></div>
        </div>
        
    </div>
</body>
 <script type="text/javascript">
        function addTable(){
             
            var h=document.getElementById("h").value;
            
            var l=document.getElementById("l").value;
            
            var divtab=document.getElementById("divt");
            
            var tab="<table border='solid' style='width:800px;height:200px;'>";
            
            for(var i=0;i<h;i++){
            
                tab+="<tr>";
                
                for(var j=0;j<l;j++){
                    tab+="<td>";
                    tab+="</td>";
                }
                
                tab +="</tr>";
                
            }
            tab+="</table>";
            divtab.innerHTML=tab;
        }
    </script>
</html>