使用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 @   StephenCurry  阅读(13445)  评论(0编辑  收藏  举报
编辑推荐:
· .NET Core 中如何实现缓存的预热?
· 从 HTTP 原因短语缺失研究 HTTP/2 和 HTTP/3 的设计差异
· AI与.NET技术实操系列:向量存储与相似性搜索在 .NET 中的实现
· 基于Microsoft.Extensions.AI核心库实现RAG应用
· Linux系列:如何用heaptrack跟踪.NET程序的非托管内存泄露
阅读排行:
· TypeScript + Deepseek 打造卜卦网站:技术与玄学的结合
· 阿里巴巴 QwQ-32B真的超越了 DeepSeek R-1吗?
· 【译】Visual Studio 中新的强大生产力特性
· 10年+ .NET Coder 心语 ── 封装的思维:从隐藏、稳定开始理解其本质意义
· 【设计模式】告别冗长if-else语句:使用策略模式优化代码结构
点击右上角即可分享
微信分享提示