jQuery表格固定列插件在實際開發中非常實用,可以讓表格內容呈現更好的視覺效果以及用戶操作體驗。本篇文章將介紹如何使用這個插件來制作一個固定列表格。
<!DOCTYPE html>
<html>
<head>
<title>固定列表格</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="./jquery.fixedtable.js"></script>
<link rel="stylesheet" type="text/css" href="./jquery.fixedtable.css">
</head>
<body>
<table id="fixed-table">
<thead>
<tr>
<th>姓名</th>
<th>性別</th>
<th>年齡</th>
<th>身高</th>
<th>體重</th>
</tr>
</thead>
<tbody>
<tr>
<td>小明</td>
<td>男</td>
<td>25</td>
<td>175</td>
<td>65</td>
</tr>
<tr>
<td>小紅</td>
<td>女</td>
<td>23</td>
<td>165</td>
<td>50</td>
</tr>
<tr>
<td>小強</td>
<td>男</td>
<td>27</td>
<td>180</td>
<td>75</td>
</tr>
</tbody>
</table>
<script>
$(document).ready(function() {
$('#fixed-table').fixedTable({
fixedColumnsLeft: 1 // 指定需要固定的列數量
});
});
</script>
</body>
</html>
在上面的代碼中,我們需要引入jQuery庫以及jquery.fixedtable插件的js和css文件。在table元素中,thead和tbody分別定義表頭和主體內容。然后,在script標簽中使用fixedTable函數將table轉換為固定列表格,其中fixedColumnsLeft參數指定需要固定的列數量。最終的效果如下所示: