使用JS语句,利用for循环的方法创建表格的两种方法

首先去layui官网下载教程示例,在项目中加载layui.css,layui.js,JQuery.js

第一种:

将jsp语句写成字符串的形式,使用document.write()方式输出:

代码如下:

 var str = "";
     str += "<table class='layui-table'>";

            for (var i = 0; i < 6;i++)
         {
            str += "<tr>";
                for(var j = 0; j < 24;j++){
                    str += " <td>" + (i + j) + "</td>";
                }
            str += "</tr>";
        }
    str += "</table>";

    document.write(str);

效果如图所示:

第二种,创建元素对象:

首先用数组保存变量名,再通过数组保存的变量名来创建元素对象

代码如下:

 var tab = document.createElement("table");
      tab.className = "layui-table";
      document.body.appendChild(tab);

      var body = document.createElement("tbody");
      tab.appendChild(body);

      //定义存放元素名称的二维数组
      var tabletr = new Array(6);
      for(var i=0;i<6;i++){
          tabletr[i]=new Array();
                for(var j=0;j<24;j++){
                    tabletr[i][j]= i + j;
                }
      }

      for(var i = 1;i<7;i++){
          tabletr[i] = document.createElement("tr");
          body.appendChild(tabletr[i]);

          for(var j = 1;j<25;j++){
              tabletr[i][j] = document.createElement("th");
              tabletr[i].appendChild(tabletr[i][j]);
          }
      }

效果如图所示:

 

posted @ 2017-07-25 09:28  StephenCurry  阅读(13352)  评论(0编辑  收藏  举报