注册 登录 充值会员 退出
联系客服 毕业设计 java源码 PHP源码
充值

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

作者/代码整理:  (源码已亲测,不会安装的可以向QQ1915635791要安装视频教程) 发布日期:2023-05-23
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>

关注公众号,免费赠送安装视频教程、环境和学习视频,后面会不断更新。