首先去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循环的方法创建表格的两种方法的更多相关文章

  1. js如何动态创建表格(两种方法)

    js如何动态创建表格(两种方法) 一.总结 一句话总结: 1.方法一:写好创建表格的html代码,将之赋值给div的innerHTML. 2.方法二.直接用创建好的table元素的方法insertRo ...

  2. JS动态创建元素(两种方法)

    前言 创建元素有两种方法 1)将需要创建的元素,以字符串的形式拼接:找到父级元素,直接对父级元素的innnerHTML进行赋值. 2)使用Document.Element对象自带的一些函数,来实现动态 ...

  3. 用easyui实现查询条件的后端传递并自动刷新表格的两种方法

    用easyui实现查询条件的后端传递并自动刷新表格的两种方法 搜索框如下: 通过datagrid的load方法直接传递参数并自动刷新表格 通过ajax的post函数传递参数并通过loadData方法将 ...

  4. Vue 创建组件的两种方法

    地址:https://blog.csdn.net/cofecode/article/details/74634301 创建组件的两种方法 1.全局注册 2.局部注册 var child=Vue.ext ...

  5. Solr创建Core的两种方法

    创建Core的两种方法: 第一种方法: 1.打开dos命令窗口,切换目录到${solr.home}\bin,然后输入:solr create -c corename之后回车: 2.打开solr安装文件 ...

  6. Java 创建线程的两种方法

    Java提供了线程类Thread来创建多线程的程序.其实,创建线程与创建普通的类的对象的操作是一样的,而线程就是Thread类或其子类的实例对象.每个Thread对象描述了一个单独的线程.要产生一个线 ...

  7. 进程和创建线程的两种方法(threading.Thread)

    进程 如QQ 要以一个整体的形式暴露给操作系统管理,里面包含对各种资源的调用,内存的管理, 网络接口的调用等,进程就是各种资源管理的集合 线程:是操作系统最小的调度单位,是一串指令的结合 进程 要操作 ...

  8. LayUI使用弹窗重载父级数据表格的两种方法

    参考LayUI官方文档,在子窗口中重载父级数据表格找到以下两种方法: 1.子窗口中重载:在子窗口中直接调用父级talbe的reload方法. $("body").on(" ...

  9. 利用Python进行图片发送与接收的两种方法---包含客户端和服务器端代码

    第一种方法 opencv.requests.flask 此方法比较耗费时间 600毫秒左右 客户端代码 #coding:utf-8 import cv2 import json import requ ...

随机推荐

  1. 51Nod 1256 乘法逆元

    题目链接:https://www.51nod.com/onlineJudge/questionCode.html#!problemId=1256 给出2个数M和N(M < N),且M与N互质,找 ...

  2. netperf 网络性能测试

    Netperf是一种网络性能的测量工具,主要针对基于TCP或UDP的传输.Netperf根据应用的不同,可以进行不同模式的网络性能测试,即批量数据传输(bulk data transfer)模式和请求 ...

  3. python-数据分析与展示(Numpy、matplotlib、pandas)---1

    笔记内容整理自mooc上北京理工大学嵩天老师python系列课程数据分析与展示,本人小白一枚,如有不对,多加指正 1.ndarray对象的属性 .ndim..shape..size(元素个数,不是占用 ...

  4. Maven项目启动报错:org.springframework.web.filter.CharacterEncodingFilter cannot be cast to javax.servlet.Filter

    看网上说法tomcat启动时会把lib目录下的jar包加载进内存,而项目里也有相同的jar包就会导致jar包冲突 解决办法: 把pom依赖里相应的jar包添加<scope>标签 <d ...

  5. mysqldump进行复制数据导出导入时的问题

    在执行数据导入到从库时,若使用mysqldump命令进行数据导出,应当一次性将需要同步的库导出. mysqldump -uroot -p --single-transaction --database ...

  6. TCP/IP 最常见的错误原因码 (errno)列表

    对于在基于 UNIX 的环境中的 TCP/IP 用户,下表列出了某些最常见的错误原因码 (errno).它不是完整的错误列表.可以在文件 /usr/include/sys/errno.h 中找到 Er ...

  7. httpclient新旧版本分割点4.3

    从这个版本开始,httpclient的api发生了一次重大调整.主要包括如下:Release 4.3 Final ------------------- This is the first stabl ...

  8. Getting started with Kaggle -- Kaggle Competitions

    1: The Competition We'll be learning how to generate a submission for a Kaggle competition. Kaggle i ...

  9. python之路-day1-if...else...流程判断

    判断输入的用户名:#Author:zww _username = "zww" _password = " username = input("username: ...

  10. (4运行例子)自己动手,编写神经网络程序,解决Mnist问题,并网络化部署

    ​1.联通ColaB 2.运行最基础mnist例子,并且打印图表结果  # https://pypi.python.org/pypi/pydot#!apt-get -qq install -y gra ...