layui表格实现代码
发布时间 - 2026-01-11 01:11:39 点击率：次本文实例为大家分享了layui基本表格的具体代码，供大家参考，具体内容如下
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>基本表格</title>
<link rel="stylesheet" href="layui/css/layui.css">
</head>
<body>
<fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
<legend>默认表格</legend>
</fieldset>
<div class="layui-form">
<table class="layui-table">
<colgroup>
<col width="50">
<col width="150">
<col width="150">
<col width="200">
<col>
</colgroup>
<thead>
<tr>
<th><input type="checkbox" name="" lay-skin="primary" lay-filter="allChoose"></th>
<th>人物</th>
<th>民族</th>
<th>出场时间</th>
<th>格言</th>
</tr>
</thead>
<tbody>
<tr>
<td><input type="checkbox" name="" lay-skin="primary"></td>
<td>贤心</td>
<td>汉族</td>
<td>1989-10-14</td>
<td>人生似修行</td>
</tr>
<tr>
<td><input type="checkbox" name="" lay-skin="primary"></td>
<td>张爱玲</td>
<td>汉族</td>
<td>1920-09-30</td>
<td>于千万人之中遇见你所遇见的人，于千万年之中，时间的无涯的荒野里…</td>
</tr>
<tr>
<td><input type="checkbox" name="" lay-skin="primary"></td>
<td>Helen Keller</td>
<td>拉丁美裔</td>
<td>1880-06-27</td>
<td> Life is either a daring adventure or nothing.</td>
</tr>
<tr>
<td><input type="checkbox" name="" lay-skin="primary"></td>
<td>岳飞</td>
<td>汉族</td>
<td>1103-北宋崇宁二年</td>
<td>教科书再滥改，也抹不去“民族英雄”的事实</td>
</tr>
<tr>
<td><input type="checkbox" name="" lay-skin="primary"></td>
<td>孟子</td>
<td>华夏族（汉族）</td>
<td>公元前-372年</td>
<td>猿强，则国强。国强，则猿更强！ </td>
</tr>
</tbody>
</table>
</div>
<fieldset class="layui-elem-field layui-field-title" style="margin-top: 50px;">
<legend>行边框表格</legend>
</fieldset>
<table class="layui-table" lay-skin="line">
<colgroup>
<col width="150">
<col width="150">
<col width="200">
<col>
</colgroup>
<thead>
<tr>
<th>人物</th>
<th>民族</th>
<th>出场时间</th>
<th>格言</th>
</tr>
</thead>
<tbody>
<tr>
<td>贤心</td>
<td>汉族</td>
<td>1989-10-14</td>
<td>人生似修行</td>
</tr>
<tr>
<td>张爱玲</td>
<td>汉族</td>
<td>1920-09-30</td>
<td>于千万人之中遇见你所遇见的人，于千万年之中，时间的无涯的荒野里…</td>
</tr>
<tr>
<td>Helen Keller</td>
<td>拉丁美裔</td>
<td>1880-06-27</td>
<td> Life is either a daring adventure or nothing.</td>
</tr>
<tr>
<td>岳飞</td>
<td>汉族</td>
<td>1103-北宋崇宁二年</td>
<td>教科书再滥改，也抹不去“民族英雄”的事实</td>
</tr>
<tr>
<td>孟子</td>
<td>华夏族（汉族）</td>
<td>公元前-372年</td>
<td>猿强，则国强。国强，则猿更强！ </td>
</tr>
</tbody>
</table>
<fieldset class="layui-elem-field layui-field-title" style="margin-top: 50px;">
<legend>列边框表格</legend>
</fieldset>
<table class="layui-table" lay-even="" lay-skin="row">
<colgroup>
<col width="150">
<col width="150">
<col width="200">
<col>
</colgroup>
<thead>
<tr>
<th>人物</th>
<th>民族</th>
<th>出场时间</th>
<th>格言</th>
</tr>
</thead>
<tbody>
<tr>
<td>贤心</td>
<td>汉族</td>
<td>1989-10-14</td>
<td>人生似修行</td>
</tr>
<tr>
<td>张爱玲</td>
<td>汉族</td>
<td>1920-09-30</td>
<td>于千万人之中遇见你所遇见的人，于千万年之中，时间的无涯的荒野里…</td>
</tr>
<tr>
<td>Helen Keller</td>
<td>拉丁美裔</td>
<td>1880-06-27</td>
<td> Life is either a daring adventure or nothing.</td>
</tr>
<tr>
<td>岳飞</td>
<td>汉族</td>
<td>1103-北宋崇宁二年</td>
<td>教科书再滥改，也抹不去“民族英雄”的事实</td>
</tr>
<tr>
<td>孟子</td>
<td>华夏族（汉族）</td>
<td>公元前-372年</td>
<td>猿强，则国强。国强，则猿更强！ </td>
</tr>
</tbody>
</table>
<fieldset class="layui-elem-field layui-field-title" style="margin-top: 50px;">
<legend>无边框表格</legend>
</fieldset>
<table class="layui-table" lay-even="" lay-skin="nob">
<colgroup>
<col width="150">
<col width="150">
<col width="200">
<col>
</colgroup>
<thead>
<tr>
<th>人物</th>
<th>民族</th>
<th>出场时间</th>
<th>格言</th>
</tr>
</thead>
<tbody>
<tr>
<td>贤心</td>
<td>汉族</td>
<td>1989-10-14</td>
<td>人生似修行</td>
</tr>
<tr>
<td>张爱玲</td>
<td>汉族</td>
<td>1920-09-30</td>
<td>于千万人之中遇见你所遇见的人，于千万年之中，时间的无涯的荒野里…</td>
</tr>
<tr>
<td>Helen Keller</td>
<td>拉丁美裔</td>
<td>1880-06-27</td>
<td> Life is either a daring adventure or nothing.</td>
</tr>
<tr>
<td>岳飞</td>
<td>汉族</td>
<td>1103-北宋崇宁二年</td>
<td>教科书再滥改，也抹不去“民族英雄”的事实</td>
</tr>
<tr>
<td>孟子</td>
<td>华夏族（汉族）</td>
<td>公元前-372年</td>
<td>猿强，则国强。国强，则猿更强！ </td>
</tr>
</tbody>
</table>
<script src="layui/layui.js" charset="utf-8"></script>
<script>
layui.use('form', function(){
var $ = layui.jquery, form = layui.form();
//全选
form.on('checkbox(allChoose)', function(data){
var child = $(data.elem).parents('table').find('tbody input[type="checkbox"]');
child.each(function(index, item){
item.checked = data.elem.checked;
});
form.render('checkbox');
});
});
</script>
</body>
</html>
官网表格
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。
# layui
# 表格
# layui table 参数设置方法
# layui 监听表格复选框选中值的方法
# LayUI表格批量删除方法
# 汉族
# 孟子
# 的人
# 国强
# 华夏
# 民族英雄
# 不去
# 万人
# 北宋
# 你所
# 公元前
# 二年
# 更强
# 岳飞
# 千万年
# 荒野里
# 大家分享
# 具体内容
# 官网
# 大家多多
相关栏目：
【
网站优化151355 】
【
网络推广146373 】
【
网络技术251813 】
【
AI营销90571 】
相关推荐：
Bootstrap整体框架之CSS12栅格系统
Laravel怎么配置S3云存储驱动_Laravel集成阿里云OSS或AWS S3存储桶【教程】
html5audio标签播放结束怎么触发事件_onended回调方法【教程】
nodejs redis 发布订阅机制封装实现方法及实例代码
大型企业网站制作流程,做网站需要注册公司吗？
Laravel怎么集成Log日志记录_Laravel单文件与每日日志配置及自定义通道【详解】
使用spring连接及操作mongodb3.0实例
Laravel辅助函数有哪些_Laravel Helpers常用助手函数大全
教学论文网站制作软件有哪些,写论文用什么软件
？
Laravel如何安装使用Debugbar工具栏_Laravel性能调试与SQL监控插件【步骤】
Laravel如何配置和使用队列处理异步任务_Laravel队列驱动与任务分发实例
,在苏州找工作，上哪个网站比较好？
极客网站有哪些,DoNews、36氪、爱范儿、虎嗅、雷锋网、极客公园这些互联网媒体网站有什么差异？
JavaScript模板引擎Template.js使用详解
Claude怎样写结构化提示词_Claude结构化提示词写法【教程】
Thinkphp 中 distinct 的用法解析
Laravel如何使用Sanctum进行API认证？（SPA实战）
微信小程序 scroll-view组件实现列表页实例代码
Laravel PHP版本要求一览_Laravel各版本环境要求对照
BootStrap整体框架之基础布局组件
油猴 教程,油猴搜脚本为什么会网页无法显示？
php嵌入式断网后怎么恢复_php检测网络重连并恢复硬件控制【操作】
香港服务器网站搭建教程-电商部署、配置优化与安全稳定指南
Laravel怎么生成URL_Laravel路由命名与URL生成函数详解
简单实现jsp分页
Python自然语言搜索引擎项目教程_倒排索引查询优化案例
无锡营销型网站制作公司,无锡网选车牌流程？
西安专业网站制作公司有哪些,陕西省建行官方网站？
javascript日期怎么处理_如何格式化输出
bootstrap日历插件datetimepicker使用方法
如何在IIS管理器中快速创建并配置网站？
CSS3怎么给轮播图加过渡动画_transition加transform实现【技巧】
Laravel如何处理异常和错误？（Handler示例）
如何在香港服务器上快速搭建免备案网站？
Mybatis 中的insertOrUpdate操作
Midjourney怎么调整光影效果_Midjourney光影调整方法【指南】
悟空识字如何进行跟读录音_悟空识字开启麦克风权限与录音
如何构建满足综合性能需求的优质建站方案？
Laravel Debugbar怎么安装_Laravel调试工具栏配置指南
Linux虚拟化技术教程_KVMQEMU虚拟机安装与调优
如何在阿里云香港服务器快速搭建网站？
如何快速建站并高效导出源代码？
QQ浏览器网页版登录入口 个人中心在线进入
Laravel如何使用Blade模板引擎？（完整语法和示例）
php8.4header发送头信息失败怎么办_php8.4header函数问题解决【解答】
郑州企业网站制作公司,郑州招聘网站有哪些？
Firefox Developer Edition开发者版本入口
EditPlus中的正则表达式 实战(2)
javascript中对象的定义、使用以及对象和原型链操作小结
Win11应用商店下载慢怎么办 Win11更改DNS提速下载【修复】