用layui美化 div class=table-list table width=100 cellspacing=0 thead tr th width=40IDth th width=100用户th th width=110评论内容th
<p>使用Layui进行美化,需要引入Layui的相关样式和JavaScript文件。</p>
<p>首先,在HTML文件的<head>标签中引入Layui的样式文件和JavaScript文件:</p>
<pre><code class="language-html"><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/layui@2.5.6/dist/css/layui.css">
<script src="https://cdn.jsdelivr.net/npm/layui@2.5.6/dist/layui.js"></script>
</code></pre>
<p>然后,在表格外层的<div>标签上添加Layui的class样式:</p>
<pre><code class="language-html"><div class="layui-table">
<table width="100%" cellspacing="0">
...
</table>
</div>
</code></pre>
<p>接下来,将表格中的<th>和<td>标签的align属性替换为Layui的class样式:</p>
<pre><code class="language-html"><thead>
<tr>
<th class="layui-table-cell" width="40">ID</th>
<th class="layui-table-cell" width="100">用户</th>
<th class="layui-table-cell" width="110">评论内容</th>
<th class="layui-table-cell" width="120">操作</th>
</tr>
</thead>
<tbody>
<c:forEach items="${list}" var="bean">
<tr>
<td class="layui-table-cell" align="center">${bean.id}</td>
<td class="layui-table-cell" align="center">${bean.user.username}</td>
<td class="layui-table-cell" align="center"><a href="../goods!view?id=${bean.gid}" target="_blank">${bean.content}</a></td>
<td class="layui-table-cell" align="center">
<!--<a href="method!goodsedit?id=${bean.id}">修改</a> | --><a href="method!replydelete?id=${bean.id}" onclick="return confirm('确定删除')">删除</a>
</td>
</tr>
</c:forEach>
</tbody>
</code></pre>
<p>最后,在HTML文件的<script>标签中初始化Layui的table组件:</p>
<pre><code class="language-html"><script>
layui.use('table', function(){
var table = layui.table;
//执行渲染
table.init();
});
</script>
</code></pre>
<p>以上就是使用Layui进行美化的示例代码</p>
原文地址: https://www.cveoy.top/t/topic/hGk0 著作权归作者所有。请勿转载和采集!