js创建表格

最新推荐文章于 2023-06-12 12:00:40 发布

人道烘炉_L

最新推荐文章于 2023-06-12 12:00:40 发布

阅读量451

点赞数

本文链接：https://blog.csdn.net/My_emotions_L/article/details/78444021

版权

<!DOCTYPE html>
<html>
   <head>
       <meta charset="UTF-8">
       <title></title>
       <style type="text/css">
           input{
               /*转换为块元素*/
               display: block;
               height: 30px;
               margin: 6px;
           }
       </style>
       <script type="text/javascript">
           function bu(){
               /*获取行数和列数*/
               var h=document.getElementById("h").value;
               var w=document.getElementById("w").value;
               /*创建表单数组*/
           var f=document.forms[0];
           /*表格元素*/
               var t=document.createElement("table");
               t.setAttribute("border","1px");
               t.setAttribute("bordercolor","#000");
               t.setAttribute("cellpadding","0px");
               t.setAttribute("cellspacing","0px");
               for (var i=1 ; i<=h ; i++) {
                   /*行元素*/
                   var hh=document.createElement("tr");
                   for (var j=1 ; j<=w ; j++) {
                       /*单元格元素*/
                       var hw=document.createElement("td");
                       var txt=document.createTextNode(i+"行"+j+"列");
                       hw.appendChild(txt);
                       hh.appendChild(hw);
               }
                   t.appendChild(hh);
               }
               f.parentNode.appendChild(t);
           }

       </script>
   </head>
   <body>
       <form >
           创建行<input type="text" id="h"/>
           创建列<input type="text" id="w"/>
           <input type="button" value="创建表格" οnclick="bu()"/>
       </form>
   </body>
</html>