用JS动态创建表格-优快云博客

本文链接：https://blog.youkuaiyun.com/fxq405376033/article/details/6948752

<html>
<head>
  <title>用JS创建表格</title>
  <script type="text/javascript">
   function CreateTable(){
    //create table
    var oTable=document.createElement("table");
    oTable.setAttribute("border","1");
    oTable.setAttribute("width","100%");
    oTable.setAttribute("height","50px");
    //create tbody
    var oTBody=document.createElement("tbody");
    oTable.appendChild(oTBody);
    //create the first tr
    oTBody.insertRow(0);
    oTBody.rows[0].insertCell(0);
    oTBody.rows[0].cells(0).appendChild(document.createTextNode("1"));
    oTBody.rows[0].insertCell(1);
    oTBody.rows[0].cells(1).appendChild(document.createTextNode("2"));
    //create the second tr
    oTBody.insertRow(1);
    oTBody.rows[1].insertCell(0);
    oTBody.rows[1].cells(0).appendChild(document.createTextNode("3"));
    oTBody.rows[1].insertCell(1);
    oTBody.rows[1].cells(1).appendChild(document.createTextNode("4"));
    //add the table to the document body
    document.body.appendChild(oTable);
   }
  </script>
</head>

<body>
  <input type="button" οnclick="CreateTable();" value="创建表格" />
</body>
</html>