简单表格输入自动生成

最新推荐文章于 2020-12-09 19:31:46 发布

今晚月亮也睡了

最新推荐文章于 2020-12-09 19:31:46 发布

阅读量320

点赞数

本文链接：https://blog.csdn.net/weixin_45756606/article/details/102575519

版权

<!DOCTYPE html>
  <html lang="en">
  <head>
    <meta charset="UTF-8">     
	<title></title>
     <style type="text/css">
     </style>
 </head>
 <body>
 <center>
     <br/><br/>
     <h1>自动生成表格<h1/>
    行数 <input type="text" value="5" id="rows"style="width: 300px;height: 40px"><br/><br/>
    列数 <input type="text" value="5" id="cols" style="width: 300px;height: 40px"><br/><br/>
     <input type="button" value="创建表格" onclick="creatTab()" style="width: 200px;height: 50px"><br/><br/>
     <div id="div1"></div>
     <script>
     function creatTab(){
         rows=document.getElementById('rows').value;
         cols=document.getElementById('cols').value;
         div1=document.getElementById('div1');
         var ta=div1.getElementsByTagName('table')[0]
         if (ta) {ta.parentNode.removeChild(ta)}
         var tab = document.createElement("table");
         tab.width=1000;
         tab.border=1;
         for(var i=0;i<rows;i++){
             tab.insertRow(i)
             for(var j=0;j<cols;j++){
                 tab.rows[i].insertCell(j).innerHTML=i;
                 tab.rows[i].cells[j].style.background='pink'
             }
        }
         document.getElementById("div1").appendChild(tab)
  }
 </script>
 </center>
 </body>
 </html>

在这里插入图片描述

今晚月亮也睡了

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
简单表格输入自动生成

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> </style> </head> ...
复制链接

扫一扫