使用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]); } }
效果如图所示: