DOM 利用创建节点追加节点做表格用户输入格式

最新推荐文章于 2024-10-06 20:16:20 发布

《码赛客》

最新推荐文章于 2024-10-06 20:16:20 发布

阅读量98

点赞数

文章标签： java

本文链接：https://blog.csdn.net/m0_49249339/article/details/123606882

版权

<!DOCTYPE html>
<html>
   <head>
       <meta charset="UTF-8">
       <title></title>
   </head>
   <body>
       
       行：<input id="hang" /><br />
       列：<input id="lie" /><br />
       <button οnclick="chuangjian()">创建表格</button><br />
       
       <div id="cunfang"></div>
       <script>
           function chuangjian(){
               //获取用户输入的内容
               var row =document.getElementById("hang").value;
               var col =document.getElementById("lie").value;

                var table = document.createElement("table");//创建表格
              table.setAttribute("width","200px",);//添加属性和值
              table.setAttribute("height","100px");
              table.setAttribute("border","1px");

           for (var i=0; i<row; i++) {
              var tr = document.createElement("tr");

              for (var j=0; j<col; j++) {
                  var td = document.createElement("td");
                  tr.appendChild(td);//创建一个单元格就添加到tr上
              }
                  table.appendChild(tr);//创建好一行就添加进table上

           }
                  var div =document.getElementById("cunfang");
                  div.appendChild(table)//把节点追加进div