{
    分享网正式开通,我们为大家提供免费资源,欢迎大家踊跃投稿!

jQuery表格顶部与左右两侧固定滚动代码

jQuery表格顶部与左右两侧固定滚动代码是一款左右两侧固定列,中间内容可以横向拖动,固定表头,可以横向拖动的表格插件代码。


js代码

<script src="js/fixed-table.js"></script>
<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>


在线预览
资源均来自第三方,谨慎下载,前往第三方网站下载


爱资源分享网 , 版权所有丨本站资源仅限于学习研究,严禁从事商业或者非法活动!丨本网站采用BY-NC-SA协议进行授权
转载请注明原文链接:jQuery表格顶部与左右两侧固定滚动代码
喜欢 ()分享 (0)