因為bootstrap自帶的固定列效果滿足不了公司需求，所以借助fixed-table這個插件完成了iview固定列的效果
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" /> <title>左右兩側固定列，中間內容可以橫向拖動</title> <link rel="stylesheet" href="https://www.cnblogs.com/jiajiamiao/p/css/fixed-table.css" /> <script src="http://www.jq22.com/jquery/jquery-1.10.2.js"></script> <script src="https://www.cnblogs.com/jiajiamiao/p/js/fixed-table.js"></script> <style> .fixed-table-box{ width: 800px; margin: 50px auto; } .fixed-table-box>.fixed-table_body-wraper{/*內容了表格主體內容有縱向滾動條*/ max-height: 260px; } .fixed-table_fixed>.fixed-table_body-wraper{/*為了讓兩側固定列能夠同步表格主體內容滾動*/ max-height: 240px; }.w-150{ width: 150px; } .w-120{ width: 120px; } .w-300{ width: 300px; } .w-100{ width: 100px; } .btns{ text-align: center; } .btns button{ padding: 10px 20px; } </style></head><body> <div > <!-- 表頭 start --> <div > <table cellspacing="0" cellpadding="0" border="0"> <thead> <tr> <th data-fixed="true"><div >日期</div></th> <th ><div >姓名</div></th> <th ><div >省份</div></th> <th ><div >市區</div></th> <th ><div >地址</div></th> <th ><div >郵編</div></th> <th data-fixed="true" data-direction="right"><div >操作</div></th> </tr> </thead> </table> </div> <!-- 表頭 end --> <!-- 表格內容 start --> <div > <table cellspacing="0" cellpadding="0" border="0"> <tbody> <tr> <td ><div > 2016-05-03</div></td> <td ><div >王小虎</div></td> <td ><div >上海</div></td> <td ><div >普陀區</div></td> <td ><div >上海市普陀區金沙江路 1518 路</div></td> <td ><div >200333</div></td> <td > <div > <a href="https://www.cnblogs.com/jiajiamiao/p/###">查看</a> <a href="https://www.cnblogs.com/jiajiamiao/p/###">編輯</a> </div> </td> </tr> <tr> <td ><div > 2016-05-03</div></td> <td ><div >王小虎</div></td> <td ><div >上海</div></td> <td ><div >普陀區</div></td> <td ><div >上海市普陀區金沙江路 1518 路</div></td> <td ><div >200333</div></td> <td > <div > <a href="https://www.cnblogs.com/jiajiamiao/p/###">查看</a> <a href="https://www.cnblogs.com/jiajiamiao/p/###">編輯</a> </div> </td> </tr> <tr> <td ><div > 2016-05-03</div></td> <td ><div >王小虎</div></td> <td ><div >上海</div></td> <td ><div >普陀區</div></td> <td ><div >上海市普陀區金沙江路 1518 路</div></td> <td ><div >200333</div></td> <td > <div > <a href="https://www.cnblogs.com/jiajiamiao/p/###">查看</a> <a href="https://www.cnblogs.com/jiajiamiao/p/###">編輯</a> </div> </td> </tr> <tr> <td ><div > 2016-05-03</div></td> <td ><div >王小虎</div></td> <td ><div >上海</div></td> <td ><div >普陀區</div></td> <td ><div >上海市普陀區金沙江路 1518 路</div></td> <td ><div >200333</div></td> <td > <div > <a href="https://www.cnblogs.com/jiajiamiao/p/###">查看</a> <a href="https://www.cnblogs.com/jiajiamiao/p/###">編輯</a> </div> </td> </tr> <tr> <td ><div > 2016-05-03</div></td> <td ><div >王小虎</div></td> <td ><div >上海</div></td> <td ><div >普陀區</div></td> <td ><div >上海市普陀區金沙江路 1518 路</div></td> <td ><div >200333</div></td> <td > <div > <a href="https://www.cnblogs.com/jiajiamiao/p/###">查看</a> <a href="https://www.cnblogs.com/jiajiamiao/p/###">編輯</a> </div> </td> </tr> <tr> <td ><div > 2016-05-03</div></td> <td ><div >王小虎</div></td> <td ><div >上海</div></td> <td ><div >普陀區</div></td> <td ><div >上海市普陀區金沙江路 1518 路</div></td> <td ><div >200333</div></td> <td > <div > <a href="https://www.cnblogs.com/jiajiamiao/p/###">查看</a> <a href="https://www.cnblogs.com/jiajiamiao/p/###">編輯</a> </div> </td> </tr> <tr> <td ><div > 2016-05-03</div></td> <td ><div >王小虎</div></td> <td ><div >上海</div></td> <td ><div >普陀區</div></td> <td ><div >上海市普陀區金沙江路 1518 路</div></td> <td ><div >200333</div></td> <td > <div > <a href="https://www.cnblogs.com/jiajiamiao/p/###">查看</a> <a href="https://www.cnblogs.com/jiajiamiao/p/###">編輯</a> </div> </td> </tr> <tr> <td ><div > 2016-05-03</div></td> <td ><div >王小虎</div></td> <td ><div >上海</div></td> <td ><div >普陀區</div></td> <td ><div >上海市普陀區金沙江路 1518 路</div></td> <td ><div >200333</div></td> <td > <div > <a href="https://www.cnblogs.com/jiajiamiao/p/###">查看</a> <a href="https://www.cnblogs.com/jiajiamiao/p/###">編輯</a> </div> </td> </tr> </tbody> </table> </div> <!-- 表格內容 end -->
<!-- 固定列 start --> <div > <div > <table cellspacing="0" cellpadding="0" border="0"> <thead> <tr> <th ><div >日期</div></th> </tr> </thead> </table> </div> <div > <table cellspacing="0" cellpadding="0" border="0"> <tbody> <tr> <td ><div > 2016-05-03</div></td> </tr> <tr> <td ><div > 2016-05-03</div></td> </tr> <tr> <td ><div > 2016-05-03</div></td> </tr> <tr> <td ><div > 2016-05-03</div></td> </tr> <tr> <td ><div > 2016-05-03</div></td> </tr> <tr> <td ><div > 2016-05-03</div></td> </tr> <tr> <td ><div > 2016-05-03</div></td> </tr> <tr> <td ><div > 2016-05-03</div></td> </tr> </tbody> </table> </div> </div> <div > <div > <table cellspacing="0" cellpadding="0" border="0"> <thead> <tr> <th ><div >操作</div></th> </tr> </thead> </table> </div> <div > <table cellspacing="0" cellpadding="0" border="0"> <tbody> <tr> <td > <div > <a href="https://www.cnblogs.com/jiajiamiao/p/###">查看</a> <a href="https://www.cnblogs.com/jiajiamiao/p/###">編輯</a> </div> </td> </tr> <tr> <td > <div > <a href="https://www.cnblogs.com/jiajiamiao/p/###">查看</a> <a href="https://www.cnblogs.com/jiajiamiao/p/###">編輯</a> </div> </td> </tr> <tr> <td > <div > <a href="https://www.cnblogs.com/jiajiamiao/p/###">查看</a> <a href="https://www.cnblogs.com/jiajiamiao/p/###">編輯</a> </div> </td> </tr> <tr> <td > <div > <a href="https://www.cnblogs.com/jiajiamiao/p/###">查看</a> <a href="https://www.cnblogs.com/jiajiamiao/p/###">編輯</a> </div> </td> </tr> <tr> <td > <div > <a href="https://www.cnblogs.com/jiajiamiao/p/###">查看</a> <a href="https://www.cnblogs.com/jiajiamiao/p/###">編輯</a> </div> </td> </tr> <tr> <td > <div > <a href="https://www.cnblogs.com/jiajiamiao/p/###">查看</a> <a href="https://www.cnblogs.com/jiajiamiao/p/###">編輯</a> </div> </td> </tr> <tr> <td > <div > <a href="https://www.cnblogs.com/jiajiamiao/p/###">查看</a> <a href="https://www.cnblogs.com/jiajiamiao/p/###">編輯</a> </div> </td> </tr> <tr> <td > <div > <a href="https://www.cnblogs.com/jiajiamiao/p/###">查看</a> <a href="https://www.cnblogs.com/jiajiamiao/p/###">編輯</a> </div> </td> </tr> </tbody> </table> </div> </div> <!-- 固定列 end --> </div>
<div > <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 ><div > 2016-05-03</div></td>'; html += ' <td ><div >王小虎</div></td>'; html += ' <td ><div >上海</div></td>'; html += ' <td ><div >普陀區</div></td>'; html += ' <td ><div >上海市普陀區金沙江路 1518 路</div></td>'; html += ' <td ><div >200333</div></td>'; html += ' <td >'; html += ' <div >'; html += ' <a href="https://www.cnblogs.com/jiajiamiao/p/###">查看</a>'; html += ' <a href="https://www.cnblogs.com/jiajiamiao/p/###">編輯</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></body></html>具體網址忘了存了，有需要的小伙伴可自己查一下~次案例從一個網站下載， 實作效果為：
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/39145.html
標籤：jQuery
下一篇：Jquery選擇器個人總結