jQuery为表格创建粘性表头和首列

来源:https://www.sucaihuo.com/js/2860.html 2017-08-28 23:01浏览(1549) 收藏

一款jQuery为表格创建粘性表头和首列的代码,这里提供了三种演示效果的页面,有简单的表头固定的,也有宽表格表头和首列都固定的,页面顶部有按钮可以切换不同的演示效果来查看。
jQuery为表格创建粘性表头和首列
分类:表单代码 > 表格 难易:初级
查看演示 下载资源 下载积分: 20 积分

页面的head部分,需引入3个CSS样式文件,代码如下:

<link type="text/css" rel="stylesheet" href="css/normalize.css" />
<link type="text/css" rel="stylesheet" href="css/demo.css" />
<link type="text/css" rel="stylesheet" href="css/component.css" />

页面的body部分,设置好演示表格的容器和内容,部分代码如下:

<table>
	<thead>
		<tr>
			<th>Name</th>
			<th>Email</th>
			<th>Phone</th>
			<th>Mobile</th>
		</tr>
	</thead>
	<tbody>
		<tr><td class="user-name">isaiah morgan</td><td class="user-email">isaiah.morgan50@example.com</td><td class="user-phone">(892)-322-1767</td><td class="user-mobile">(177)-767-9275</td></tr>
		<tr><td class="user-name">evelyn cooper</td><td class="user-email">evelyn.cooper69@example.com</td><td class="user-phone">(425)-779-2136</td><td class="user-mobile">(424)-467-5545</td></tr>
		<tr><td class="user-name">mason martin</td><td class="user-email">mason.martin65@example.com</td><td class="user-phone">(149)-890-9325</td><td class="user-mobile">(906)-475-4308</td></tr>
		<tr><td class="user-name">alexander hamilton</td><td class="user-email">alexander.hamilton19@example.com</td><td class="user-phone">(306)-140-4527</td><td class="user-mobile">(792)-168-5014</td></tr>
		<tr><td class="user-name">dennis nelson</td><td class="user-email">dennis.nelson55@example.com</td><td class="user-phone">(815)-876-6449</td><td class="user-mobile">(795)-652-4660</td></tr>
		<tr><td class="user-name">thomas hayes</td><td class="user-email">thomas.hayes24@example.com</td><td class="user-phone">(358)-195-5812</td><td class="user-mobile">(604)-195-8025</td></tr>
		<tr><td class="user-name">zoey parker</td><td class="user-email">zoey.parker17@example.com</td><td class="user-phone">(544)-275-6534</td><td class="user-mobile">(788)-994-6843</td></tr>
		<tr><td class="user-name">meghan cooper</td><td class="user-email">meghan.cooper47@example.com</td><td class="user-phone">(981)-986-8806</td><td class="user-mobile">(872)-260-8143</td></tr>
		<tr><td class="user-name">richard mitchelle</td><td class="user-email">richard.mitchelle41@example.com</td><td class="user-phone">(372)-385-4079</td><td class="user-mobile">(649)-916-5614</td></tr>
		<tr><td class="user-name">mason green</td><td class="user-email">mason.green14@example.com</td><td class="user-phone">(540)-641-3985</td><td class="user-mobile">(748)-678-9603</td></tr>
		<tr><td class="user-name">isaiah morgan</td><td class="user-email">isaiah.morgan50@example.com</td><td class="user-phone">(892)-322-1767</td><td class="user-mobile">(177)-767-9275</td></tr>
		<tr><td class="user-name">evelyn cooper</td><td class="user-email">evelyn.cooper69@example.com</td><td class="user-phone">(425)-779-2136</td><td class="user-mobile">(424)-467-5545</td></tr>
		<tr><td class="user-name">mason martin</td><td class="user-email">mason.martin65@example.com</td><td class="user-phone">(149)-890-9325</td><td class="user-mobile">(906)-475-4308</td></tr>
		<tr><td class="user-name">alexander hamilton</td><td class="user-email">alexander.hamilton19@example.com</td><td class="user-phone">(306)-140-4527</td><td class="user-mobile">(792)-168-5014</td></tr>
		<tr><td class="user-name">dennis nelson</td><td class="user-email">dennis.nelson55@example.com</td><td class="user-phone">(815)-876-6449</td><td class="user-mobile">(795)-652-4660</td></tr>
		<tr><td class="user-name">thomas hayes</td><td class="user-email">thomas.hayes24@example.com</td><td class="user-phone">(358)-195-5812</td><td class="user-mobile">(604)-195-8025</td></tr>
		<tr><td class="user-name">zoey parker</td><td class="user-email">zoey.parker17@example.com</td><td class="user-phone">(544)-275-6534</td><td class="user-mobile">(788)-994-6843</td></tr>
		<tr><td class="user-name">meghan cooper</td><td class="user-email">meghan.cooper47@example.com</td><td class="user-phone">(981)-986-8806</td><td class="user-mobile">(872)-260-8143</td></tr>
		<tr><td class="user-name">richard mitchelle</td><td class="user-email">richard.mitchelle41@example.com</td><td class="user-phone">(372)-385-4079</td><td class="user-mobile">(649)-916-5614</td></tr>
		<tr><td class="user-name">mason green</td><td class="user-email">mason.green14@example.com</td><td class="user-phone">(540)-641-3985</td><td class="user-mobile">(748)-678-9603</td></tr>
		<tr><td class="user-name">isaiah morgan</td><td class="user-email">isaiah.morgan50@example.com</td><td class="user-phone">(892)-322-1767</td><td class="user-mobile">(177)-767-9275</td></tr>
		<tr><td class="user-name">evelyn cooper</td><td class="user-email">evelyn.cooper69@example.com</td><td class="user-phone">(425)-779-2136</td><td class="user-mobile">(424)-467-5545</td></tr>
		<tr><td class="user-name">mason martin</td><td class="user-email">mason.martin65@example.com</td><td class="user-phone">(149)-890-9325</td><td class="user-mobile">(906)-475-4308</td></tr>
		<tr><td class="user-name">alexander hamilton</td><td class="user-email">alexander.hamilton19@example.com</td><td class="user-phone">(306)-140-4527</td><td class="user-mobile">(792)-168-5014</td></tr>
		<tr><td class="user-name">dennis nelson</td><td class="user-email">dennis.nelson55@example.com</td><td class="user-phone">(815)-876-6449</td><td class="user-mobile">(795)-652-4660</td></tr>
		<tr><td class="user-name">thomas hayes</td><td class="user-email">thomas.hayes24@example.com</td><td class="user-phone">(358)-195-5812</td><td class="user-mobile">(604)-195-8025</td></tr>
		<tr><td class="user-name">zoey parker</td><td class="user-email">zoey.parker17@example.com</td><td class="user-phone">(544)-275-6534</td><td class="user-mobile">(788)-994-6843</td></tr>
		<tr><td class="user-name">meghan cooper</td><td class="user-email">meghan.cooper47@example.com</td><td class="user-phone">(981)-986-8806</td><td class="user-mobile">(872)-260-8143</td></tr>
		<tr><td class="user-name">richard mitchelle</td><td class="user-email">richard.mitchelle41@example.com</td><td class="user-phone">(372)-385-4079</td><td class="user-mobile">(649)-916-5614</td></tr>
		<tr><td class="user-name">mason green</td><td class="user-email">mason.green14@example.com</td><td class="user-phone">(540)-641-3985</td><td class="user-mobile">(748)-678-9603</td></tr>
	</tbody>
</table>

页面的底部,需引入jQuery库和其他两个JS文件,代码如下:

<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.ba-throttle-debounce.min.js"></script>
<script type="text/javascript" src="js/jquery.stickyheader.js"></script>
评论0
头像

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

1 2