使用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]); } }
效果如图所示:
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· .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语句:使用策略模式优化代码结构