1. 简介
在前端开发中，表格是经常被使用的组件之一。而有些时候，我们需要对表格进行一些特殊的处理，如表格反转。下面就简单介绍一下如何实现layui表格反转的方式。
2. 实现方式
2.1 准备工作
在开始实现表格反转之前，我们需要先引入layui的相关文件，并且构建一个基本的layui表格。代码示例如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>表格反转</title>
<link rel="stylesheet" href="https://cdn.bootcss.com/layui/2.4.5/css/layui.min.css">
</head>
<body>
<table class="layui-table">
<thead>
<tr>
<th>姓名</th>
<th>性别</th>
<th>城市</th>
<th>签名</th>
</tr>
</thead>
<tbody>
<tr>
<td>贤心</td>
<td>男</td>
<td>浙江杭州</td>
<td>人生格言：不忘初心，方得始终。</td>
</tr>
<tr>
<td>张三</td>
<td>男</td>
<td>北京</td>
<td>人生格言：天生我才必有用。</td>
</tr>
<tr>
<td>李四</td>
<td>女</td>
<td>上海</td>
<td>人生格言：知足常乐。</td>
</tr>
</tbody>
</table>
<script src="https://cdn.bootcss.com/layui/2.4.5/layui.min.js"></script>
</body>
</html>
以上代码会展示一个简单的layui表格，如下图所示：
2.2 JS代码实现
在准备好基本的layui表格之后，我们需要编写JS代码来实现表格反转。代码如下：
//选择表格
var table = document.getElementsByTagName('table')[0];
//获取表格头部元素
var thead = table.getElementsByTagName('thead')[0];
//获取表格体部元素
var tbody = table.getElementsByTagName('tbody')[0];
//将表格体部元素的子元素逆向排序
var i = tbody.children.length;
while (i--) {
tbody.appendChild(tbody.children[i]);
}
以上JS代码会实现将表格体部分的子元素逆向排序，这样就实现了表格的反转效果。
2.3 效果演示
如果我们将以上JS代码加入到HTML文件中，那么我们就能实现如下效果：
3. 总结
线上文档：[layui官网](https://www.layui.com/doc/modules/table.html)
在本文中，我们通过引入layui的相关文件，以及JavaScript代码实现了一个简单的layui表格反转。了解了本文的内容之后，相信大家便可以对layui表格反转实现有一个简单的认识了。