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

使用JS语句,利用for循环的方法创建表格的两种方法的更多相关文章
- js如何动态创建表格(两种方法)
js如何动态创建表格(两种方法) 一.总结 一句话总结: 1.方法一:写好创建表格的html代码,将之赋值给div的innerHTML. 2.方法二.直接用创建好的table元素的方法insertRo ...
- JS动态创建元素(两种方法)
前言 创建元素有两种方法 1)将需要创建的元素,以字符串的形式拼接:找到父级元素,直接对父级元素的innnerHTML进行赋值. 2)使用Document.Element对象自带的一些函数,来实现动态 ...
- 用easyui实现查询条件的后端传递并自动刷新表格的两种方法
用easyui实现查询条件的后端传递并自动刷新表格的两种方法 搜索框如下: 通过datagrid的load方法直接传递参数并自动刷新表格 通过ajax的post函数传递参数并通过loadData方法将 ...
- Vue 创建组件的两种方法
地址:https://blog.csdn.net/cofecode/article/details/74634301 创建组件的两种方法 1.全局注册 2.局部注册 var child=Vue.ext ...
- Solr创建Core的两种方法
创建Core的两种方法: 第一种方法: 1.打开dos命令窗口,切换目录到${solr.home}\bin,然后输入:solr create -c corename之后回车: 2.打开solr安装文件 ...
- Java 创建线程的两种方法
Java提供了线程类Thread来创建多线程的程序.其实,创建线程与创建普通的类的对象的操作是一样的,而线程就是Thread类或其子类的实例对象.每个Thread对象描述了一个单独的线程.要产生一个线 ...
- 进程和创建线程的两种方法(threading.Thread)
进程 如QQ 要以一个整体的形式暴露给操作系统管理,里面包含对各种资源的调用,内存的管理, 网络接口的调用等,进程就是各种资源管理的集合 线程:是操作系统最小的调度单位,是一串指令的结合 进程 要操作 ...
- LayUI使用弹窗重载父级数据表格的两种方法
参考LayUI官方文档,在子窗口中重载父级数据表格找到以下两种方法: 1.子窗口中重载:在子窗口中直接调用父级talbe的reload方法. $("body").on(" ...
- 利用Python进行图片发送与接收的两种方法---包含客户端和服务器端代码
第一种方法 opencv.requests.flask 此方法比较耗费时间 600毫秒左右 客户端代码 #coding:utf-8 import cv2 import json import requ ...
随机推荐
- 自动部署war包脚本
war 包所在路径为:/home/wars/ROOT.war tomcat 所在路径为: ①:/home/search-3 ②:/home/search-4 部署单个war到一个tomcat中 #!/ ...
- getopt_long_only
st_i2c_parser.c中用到,遂学习一下: 参考:https://blog.csdn.net/pengrui18/article/details/8078813 https://blog.cs ...
- Linux查看机器和硬盘的SN
查看硬件RAID中某块硬盘SN # sas 口: [root@ ~]$ smartctl -a /dev/sda -d megaraid,n *** Serial number: 6RJ974SR * ...
- Linux 搭建安装Maven环境
1.前提条件: 1)下载并安装好JDK .在终端输入命令“java -version”,如果出现类似如下信息说明JDK安装成功. $ java -version java version " ...
- JavaScript 条件判断算法综合实战
在赌场21点游戏中,玩家可以通过计算牌桌上已经发放的卡牌的高低值来让自己在游戏中保持优势,这就叫21点算法. 根据下面的表格,每张卡牌都分配了一个值.如果卡牌的值大于0,那么玩家应该追加赌注.反之,追 ...
- 《2015 html5 iweb 峰会观会后感》
今天是2015 html5 iweb 峰会,大会在早上8:30,就开始了,没想到被坑了,看错一个字,把"国际会议中心",看成了"国家会议中心".大约过了10多 ...
- springmvc StringHttpMessageConverter 中文乱码的几种解决办法(亲测)
昨天,将一个原来使用JSR 311作为restful实现的测试系统改成了使用spring mvc,最后测试的时候发现输出的json字符串为乱码,从日志可以看出使用的是StringHttpMessage ...
- 【题解】Luogu UVA12345 Dynamic len(set(a[L:R]))
原题传送门 这题要用动态莫队,我博客里有介绍 这道题和luogu P1903 [国家集训队]数颜色 / 维护队列差不多,解法就在上面那篇博客里qaq 主要的问题是如何排序? 排序有三个关键字: 1.左 ...
- 2018年12月7日 字符串格式化2 format与函数1
tp7="i am \033[44;1m %(name)-25.6s\033[0m"%{"name":"sxj2343333"} print ...
- selenium css定位方式