table表格生成器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        td{
            width: 20px;
            height: 70px;
        }
    </style>
</head>
<body>

      请输入行数:<input type="text" id="rows"><br>
      请输入列数:<input type="text" id="cols"><br>
      请输入宽度:<input type="text" id="width"><br>
      请输入边框:<input type="text" id="border"><br>
      请输入内容:<input type="text" id="content"><br>
      <input type="submit" value="提交" onclick="ok()">
      <div id="box"></div>
    <script>
            function ok(){
                var rows=document.getElementById('rows').value;
                var cols=document.getElementById('cols').value;
                var width=document.getElementById('width').value;
                var border=document.getElementById('border').value;
                var content=document.getElementById('content').value;
                document.getElementById('box').innerHTML=printTable(rows,cols,content,width,border)
            }
          function printTable(rows,cols,content,width,border){

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

推荐阅读更多精彩内容