jQuery手机端table自动变为ul的插件

来源:https://www.sucaihuo.com/js/2900.html 2017-09-02 18:32浏览(3196) 收藏

一款jQuery手机端table自动变为ul的插件,通过调整浏览器的大小就能看到明显的样式变化,自动将原来的table表格结构变成了ul无序列表的结构形式,可以自由设置页面像素小于某个值时改变样式。
jQuery手机端table自动变为ul的插件
分类:表单代码 > 表格 难易:初级
查看演示 下载资源 下载积分: 20 积分

页面的head部分,需引入页面元素的样式文件,代码如下:

<link type="text/css" rel="stylesheet" href="css/style.css">

页面的body部分,在指定样式类名的div容器了放入一个table表格即可,代码如下:

<h3>请调整浏览器大小查看效果</h3>
<div class="table-list">
	<table>
		<thead>
			<tr>
				<th>标题1</th>
				<th>标题2</th>
				<th>标题3</th>
				<th>标题4</th>
				<th>标题5</th>
			</tr>
		</thead>
		<tbody>
			<tr>
				<td>内容1</td>
				<td>内容2</td>
				<td>内容3</td>
				<td>内容4</td>
				<td>内容5</td>
			</tr>
		</tbody>
	</table>
</div>

页面的底部,需引入jQuery库和表格插件,并对指定元素启用插件,代码如下:

<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/table2ul.js"></script>
<script type="text/javascript">
$(".table-list").table2ul();
</script>
评论0
头像

系统已开启自动识别垃圾评论机制,识别到的自动封号,下载出错或者资源有问题请联系全栈客服QQ 1915635791

1 2