jQuery表格顶部右侧固定滚动特效代码下载



43 168 57



特效描述:jQuery 表格顶部右侧 固定滚动,jQuery表格顶部右侧固定滚动特效代码下载

代码结构

1. 引入CSS

<link rel="stylesheet" href="css/fixed-table.css" />

2. 引入JS

<script src="js/jquery.min.js"></script>
<script src="js/fixed-table.js"></script>

3. HTML代码

<div class="fixed-table-box row-col-fixed">
	<!-- 表头 start -->
	<div class="fixed-table_header-wraper">
		<table class="fixed-table_header" cellspacing="0" cellpadding="0" border="0">
			<thead>
				<tr>
					<th class="w-150" data-fixed="true"><div class="table-cell">日期</div></th>
					<th class="w-120"><div class="table-cell">姓名</div></th>
					<th class="w-120"><div class="table-cell">省份</div></th>
					<th class="w-120"><div class="table-cell">市区</div></th>
					<th class="w-300"><div class="table-cell">地址</div></th>
					<th class="w-120"><div class="table-cell">邮编</div></th>
					<th class="w-100" data-fixed="true" data-direction="right"><div class="table-cell">操作</div></th>
				</tr>
			</thead>
		</table>
	</div>
	<!-- 表头 end -->
	<!-- 表格内容 start -->
	<div class="fixed-table_body-wraper">
		<table class="fixed-table_body" cellspacing="0" cellpadding="0" border="0">
			<tbody>
				<tr>
					<td class="w-150"><div class="table-cell"> 2016-05-03</div></td>
					<td class="w-120"><div class="table-cell">王小虎</div></td>
					<td class="w-120"><div class="table-cell">上海</div></td>
					<td class="w-120"><div class="table-cell">普陀区</div></td>
					<td class="w-300"><div class="table-cell">上海市普陀区金沙江路 1518 路</div></td>
					<td class="w-120"><div class="table-cell">200333</div></td>
					<td class="w-100">
						<div class="table-cell">
							<a href="###">查看</a>
							<a href="###">编辑</a>
						</div>
					</td>
				</tr>
				<tr>
					<td class="w-150"><div class="table-cell"> 2016-05-03</div></td>
					<td class="w-120"><div class="table-cell">王小虎</div></td>
					<td class="w-120"><div class="table-cell">上海</div></td>
					<td class="w-120"><div class="table-cell">普陀区</div></td>
					<td class="w-300"><div class="table-cell">上海市普陀区金沙江路 1518 路</div></td>
					<td class="w-120"><div class="table-cell">200333</div></td>
					<td class="w-100">
						<div class="table-cell">
							<a href="###">查看</a>
							<a href="###">编辑</a>
						</div>
					</td>
				</tr>
				<tr>
					<td class="w-150"><div class="table-cell"> 2016-05-03</div></td>
					<td class="w-120"><div class="table-cell">王小虎</div></td>
					<td class="w-120"><div class="table-cell">上海</div></td>
					<td class="w-120"><div class="table-cell">普陀区</div></td>
					<td class="w-300"><div class="table-cell">上海市普陀区金沙江路 1518 路</div></td>
					<td class="w-120"><div class="table-cell">200333</div></td>
					<td class="w-100">
						<div class="table-cell">
							<a href="###">查看</a>
							<a href="###">编辑</a>
						</div>
					</td>
				</tr>
				<tr>
					<td class="w-150"><div class="table-cell"> 2016-05-03</div></td>
					<td class="w-120"><div class="table-cell">王小虎</div></td>
					<td class="w-120"><div class="table-cell">上海</div></td>
					<td class="w-120"><div class="table-cell">普陀区</div></td>
					<td class="w-300"><div class="table-cell">上海市普陀区金沙江路 1518 路</div></td>
					<td class="w-120"><div class="table-cell">200333</div></td>
					<td class="w-100">
						<div class="table-cell">
							<a href="###">查看</a>
							<a href="###">编辑</a>
						</div>
					</td>
				</tr>
				<tr>
					<td class="w-150"><div class="table-cell"> 2016-05-03</div></td>
					<td class="w-120"><div class="table-cell">王小虎</div></td>
					<td class="w-120"><div class="table-cell">上海</div></td>
					<td class="w-120"><div class="table-cell">普陀区</div></td>
					<td class="w-300"><div class="table-cell">上海市普陀区金沙江路 1518 路</div></td>
					<td class="w-120"><div class="table-cell">200333</div></td>
					<td class="w-100">
						<div class="table-cell">
							<a href="###">查看</a>
							<a href="###">编辑</a>
						</div>
					</td>
				</tr>
				<tr>
					<td class="w-150"><div class="table-cell"> 2016-05-03</div></td>
					<td class="w-120"><div class="table-cell">王小虎</div></td>
					<td class="w-120"><div class="table-cell">上海</div></td>
					<td class="w-120"><div class="table-cell">普陀区</div></td>
					<td class="w-300"><div class="table-cell">上海市普陀区金沙江路 1518 路</div></td>
					<td class="w-120"><div class="table-cell">200333</div></td>
					<td class="w-100">
						<div class="table-cell">
							<a href="###">查看</a>
							<a href="###">编辑</a>
						</div>
					</td>
				</tr>
				<tr>
					<td class="w-150"><div class="table-cell"> 2016-05-03</div></td>
					<td class="w-120"><div class="table-cell">王小虎</div></td>
					<td class="w-120"><div class="table-cell">上海</div></td>
					<td class="w-120"><div class="table-cell">普陀区</div></td>
					<td class="w-300"><div class="table-cell">上海市普陀区金沙江路 1518 路</div></td>
					<td class="w-120"><div class="table-cell">200333</div></td>
					<td class="w-100">
						<div class="table-cell">
							<a href="###">查看</a>
							<a href="###">编辑</a>
						</div>
					</td>
				</tr>
				<tr>
					<td class="w-150"><div class="table-cell"> 2016-05-03</div></td>
					<td class="w-120"><div class="table-cell">王小虎</div></td>
					<td class="w-120"><div class="table-cell">上海</div></td>
					<td class="w-120"><div class="table-cell">普陀区</div></td>
					<td class="w-300"><div class="table-cell">上海市普陀区金沙江路 1518 路</div></td>
					<td class="w-120"><div class="table-cell">200333</div></td>
					<td class="w-100">
						<div class="table-cell">
							<a href="###">查看</a>
							<a href="###">编辑</a>
						</div>
					</td>
				</tr>
			</tbody>
		</table>
	</div>
	<!-- 表格内容 end -->
	<!-- 固定列 start -->
	<div class="fixed-table_fixed fixed-table_fixed-left">
		<div class="fixed-table_header-wraper">
			<table class="fixed-table_header" cellspacing="0" cellpadding="0" border="0">
				<thead>
					<tr>
						<th class="w-150"><div class="table-cell">日期</div></th>
					</tr>
				</thead>
			</table>
		</div>
		<div class="fixed-table_body-wraper">
			<table class="fixed-table_body" cellspacing="0" cellpadding="0" border="0">
				<tbody>
					<tr>
						<td class="w-150"><div class="table-cell"> 2016-05-03</div></td>
					</tr>
					<tr>
						<td class="w-150"><div class="table-cell"> 2016-05-03</div></td>
					</tr>
					<tr>
						<td class="w-150"><div class="table-cell"> 2016-05-03</div></td>
					</tr>
					<tr>
						<td class="w-150"><div class="table-cell"> 2016-05-03</div></td>
					</tr>
					<tr>
						<td class="w-150"><div class="table-cell"> 2016-05-03</div></td>
					</tr>
					<tr>
						<td class="w-150"><div class="table-cell"> 2016-05-03</div></td>
					</tr>
					<tr>
						<td class="w-150"><div class="table-cell"> 2016-05-03</div></td>
					</tr>
					<tr>
						<td class="w-150"><div class="table-cell"> 2016-05-03</div></td>
					</tr>
				</tbody>
			</table>
		</div>
	</div>
	<div class="fixed-table_fixed fixed-table_fixed-right">
		<div class="fixed-table_header-wraper">
			<table class="fixed-table_header" cellspacing="0" cellpadding="0" border="0">
				<thead>
					<tr>
						<th class="w-100"><div class="table-cell">操作</div></th>
					</tr>
				</thead>
			</table>
		</div>
		<div class="fixed-table_body-wraper">
			<table class="fixed-table_body" cellspacing="0" cellpadding="0" border="0">
				<tbody>
					<tr>
						<td class="w-100">
							<div class="table-cell">
								<a href="###">查看</a>
								<a href="###">编辑</a>
							</div>
						</td>
					</tr>
					<tr>
						<td class="w-100">
							<div class="table-cell">
								<a href="###">查看</a>
								<a href="###">编辑</a>
							</div>
						</td>
					</tr>
					<tr>
						<td class="w-100">
							<div class="table-cell">
								<a href="###">查看</a>
								<a href="###">编辑</a>
							</div>
						</td>
					</tr>
					<tr>
						<td class="w-100">
							<div class="table-cell">
								<a href="###">查看</a>
								<a href="###">编辑</a>
							</div>
						</td>
					</tr>
					<tr>
						<td class="w-100">
							<div class="table-cell">
								<a href="###">查看</a>
								<a href="###">编辑</a>
							</div>
						</td>
					</tr>
					<tr>
						<td class="w-100">
							<div class="table-cell">
								<a href="###">查看</a>
								<a href="###">编辑</a>
							</div>
						</td>
					</tr>
					<tr>
						<td class="w-100">
							<div class="table-cell">
								<a href="###">查看</a>
								<a href="###">编辑</a>
							</div>
						</td>
					</tr>
					<tr>
						<td class="w-100">
							<div class="table-cell">
								<a href="###">查看</a>
								<a href="###">编辑</a>
							</div>
						</td>
					</tr>
				</tbody>
			</table>
		</div>
	</div>
	<!-- 固定列 end -->
</div>
<div class="btns">
	<button type="button" id="empty_data">清空数据</button>
	<button type="button" id="add_data">添加数据</button>
	<button type="button" id="del_row">删除行</button>
</div>
<script>
	//初始化FixedTable
	$(".fixed-table-box").fixedTable();
	//清空表格
	$("#empty_data").on("click", function (){
		$(".fixed-table-box").emptyTable();
	});
	//添加数据
	$("#add_data").on("click", function (){
		$(".fixed-table-box").addRow(function (){
			var html = '';
			for(var i = 0; i < 5; i ++){
				html += '<tr>';
				html += '    <td class="w-150"><div class="table-cell"> 2016-05-03</div></td>';
				html += '    <td class="w-120"><div class="table-cell">王小虎</div></td>';
				html += '    <td class="w-120"><div class="table-cell">上海</div></td>';
				html += '    <td class="w-120"><div class="table-cell">普陀区</div></td>';
				html += '    <td class="w-300"><div class="table-cell">上海市普陀区金沙江路 1518 路</div></td>';
				html += '    <td class="w-120"><div class="table-cell">200333</div></td>';
				html += '    <td class="w-100">';
				html += '        <div class="table-cell">';
				html += '            <a href="###">查看</a>';
				html += '            <a href="###">编辑</a>';
				html += '        </div>';
				html += '    </td>';
				html += '</tr>';
			}
			return html;
		});
	});
	//删除指定行
	$("#del_row").on("click", function (){
		$(".fixed-table-box").deleteRow($(".fixed-table-box").children('.fixed-table_fixed-left').children('.fixed-table_body-wraper').find('tr').eq(0));
	});
</script>
<div style="text-align:center;margin:50px 0; font:normal 14px/24px 'MicroSoft YaHei';">
</div>



用户评论
大牛,别默默的看了,快登录帮我点评一下吧!:)      登录 | 注册


热门标签: 滚动流动 自动滚动图片轮播 滑动星星打分 切换按钮 form表单 其他更多 文字滚动 添加删除 table表格

×
×

注册

官方QQ群

扫描上面二维码加微信群

官方QQ群

jQuery/js讨论群
群号:642649996
Css3+Html5讨论群
群号:322131262

加群请备注:从官网了解到