输入行列制作表格

最新推荐文章于 2022-07-23 14:07:39 发布

黑暗中的鬼

最新推荐文章于 2022-07-23 14:07:39 发布

阅读量435

点赞数

本文链接：https://blog.csdn.net/Mrzhaoplus/article/details/78511641

版权

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title></title>
  <script type="text/javascript">
   //点击事件
   function zhi(){
    //获取输入框内容
    var hang=document.getElementById("hang").value;
    var lie=document.getElementById("lie").value;
    //创建表格
    var tab=document.createElement("table");
    //获取form表单
    var f=document.forms[0];
    //添加框线
    tab.setAttribute("border","1px");
    //循环行数
    for(var i=0;i<hang;i++){
     //创建行
     var tr1=document.createElement("tr");
     //内嵌循环列
     for(var a=0;a<lie;a++){
      //通过createTextNode文本节点写入内容
      var nr=document.createTextNode("赵伟博");
      //创建列
     var td1=document.createElement("td");
     //将内容添加到列
     td1.appendChild(nr);
     //将列添加创建的行
     tr1.appendChild(td1);
       }
     //将行数添加的到表
     tab.appendChild(tr1);
    }
    //讲标显示到form表单
    f.parentNode.appendChild(tab);
   }
  </script>
</head>
<body>
  <form>
  <input type="text" id="hang"/>
  <input type="text" id="lie"/>
  <input type="button" οnclick="zhi()" value="制作表"/>
  </form>
</body>
</html>