原生态 JavaScript 动态创建任意行数和列数的表格简单脚本（简单Table ，object）

现在的位置: 首页 > 综合 > 正文

原生态 JavaScript 动态创建任意行数和列数的表格简单脚本（简单Table ，object）

2018年05月25日 ⁄ 综合 ⁄ 共 1395字 ⁄ 字号小中大 ⁄ 评论关闭

前段时间用Jquery框架，把原生态Javascript都忘得差不多了！最近不怎么忙，在重新熟悉一下！O(∩_∩)O哈哈~ （本人参加工作才一年多，写的不好还请见谅！）

HTML:

<!DOCTYPE HTML>
<HTML>
  <head>
    <title>table</title>
    <script type="text/javascript" src="table.js"></script>
    <style type="text/css">
      *{
        margin:0px;
        padding:0px;
      }
      table tr td{
        border : 1px solid #ff0000;
        width  : 60px;
        height : 20px;
      }
    </style>
  </head>
  <body>
    <div id="wrapper">
    </div>
    <script type="text/javascript">
      window.onload=function(){
        var monitorTable={
           container : "wrapper",
                name : "monitorTable",
                  id : "monitorEvent",
                 row :  4,
                 col :  6
        };
        table(monitorTable); //createTable
      };
    </script>
  </body>
<HTML>

table.js

function table(table){
   var _table={
           con : table.container,
          name : table.name,
            id : table.id,
           row : table.row,
           col : table.col,
    createElem : function(elem){
                   return document.createElement(elem);
                 },
     getElemId : function(id){
                   return document.getElementById(id);
                 }
   }
  // console.log(_table.createElem("table"));
   var Table=_table.createElem("table"),
       thead=_table.createElem("thead"),
       tbody=_table.createElem("tbody"),
       tableParent=_table.con;
   

   var trHead=_table.createElem("tr"); //thead
   //tr.appendChild(thead);
   for(var i=0;i<_table.col;i++){
     var th=_table.createElem("th");
     trHead.appendChild(th);
   }
   thead.appendChild(trHead);

   for(var m=0;m<_table.row;m++){
     var tr=_table.createElem("tr");
     for(var n=0;n<_table.col;n++){
        var td=_table.createElem("td");
        tr.appendChild(td);
      }
     tbody.appendChild(tr);

   }

   Table.appendChild(thead);
   Table.appendChild(tbody);
   _table.getElemId("wrapper").appendChild(Table);

}

截图：