基于Bootstrap table組件實現多層表頭的實例代碼
在做私活的時候，有一個需求是要在頁面上實現多層表頭。一開始有點懵，不知道怎么來實現，我回想起在JFTT的時候，曾用過Flex版的多層表頭，不過那離現在已經很久遠了，久遠到Flex已經被淘汰出局了。于是在網上折騰了好一會兒，終于找到一款用起來簡單，效果又很不錯的組件——Bootstrap-table。
Bootstrap-table還有很多強大的功能，但這篇文章我們把關注點只放在多層表頭上，關注點確定后，這篇博客就很簡單了，但我覺得還是很有必要推而廣之——因為之前在看董卿主持的《詩詞大會》，里面有很多基礎的知識，竟然有很多人都答不上來，搞得我一度很“囂張”，對老婆夸下?？谡f我也能過第一輪，但事實是我過不了——我也不會寫“碧玉妝成一樹高，萬條垂下綠絲絳（tao）”中的tao字。
所以，文章不在于其難度，而在于其意義——在月球上邁上一小步和在地球上邁上一小步差別就在于“這是個人邁出的一小步，但卻是人類邁出的一大步?！?/p>
0.效果圖
1.實現方法
<html>
<head>
<title>多層表頭</title>
<link rel="stylesheet">
<style type="text/css">
.table td, .table th {
font-style: normal;
font-weight: normal;
text-align:center;
}
.bootstrap-table {
width: 100%;
}
</style>
</head>
<body>
<table data-toggle="table">
<thead>
<tr>
<th data-colspan="1">妻子</th>
<th data-colspan="2">車子</th>
<th data-colspan="3">房子</th>
<th data-rowspan="2">總價值</th>
</tr>
<tr>
<th>唯一</th>
<th>Mini</th>
<th>Smart</th>
<th>90平</th>
<th>149平</th>
<th>別墅</th>
</tr>
</thead>
<tbody>
<tr>
<td>∞</td>
<td>30萬</td>
<td>20萬</td>
<td>60萬</td>
<td>100萬</td>
<td>看著辦</td>
<td>∞∞</td>
</tr>
</tbody>
</table>
<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.js"></script>
<script src="https://cdn.bootcss.com/bootstrap-table/1.11.1/bootstrap-table.min.js"></script>
</body>
</html>
2.具體步驟
第一步，通過CDN引入jquery和bootstrap-table。
<link rel="stylesheet"> <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.js"></script> <script src="https://cdn.bootcss.com/bootstrap-table/1.11.1/bootstrap-table.min.js"></script>
第二步，第一層表頭；
<tr> <th data-colspan="1">妻子</th> <th data-colspan="2">車子</th> <th data-colspan="3">房子</th> <th data-rowspan="2">總價值</th> </tr>
通過data-colspan指定二級表頭橫向有多少個，縱向為1；
通過data-rowspan指定二級表頭縱向有多少個，橫向為1；
第三步，第二層表頭；
<tr> <th>唯一</th> <th>Mini</th> <th>Smart</th> <th>90平</th> <th>149平</th> <th>別墅</th> </tr>
注意data-rowspan=”2”對應的第二層表頭就不需要指定了。
第三步，啟用bootstrap-table。
<table data-toggle="table"> </table>
總結
以上所述是小編給大家介紹的Bootstrap table實現多層表頭的實例代碼，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對腳本之家網站的支持！
相關文章
Javascript中 帶名 匿名 箭頭函數的重要區(qū)別(推薦)
這篇文章主要介紹了Javascript中 帶名 匿名 箭頭函數的重要區(qū)別，非常不錯，具有參考借鑒價值，需要的朋友參考下吧2017-01-01
下面小編就為大家?guī)硪黄狫S實現登錄頁面記住密碼和enter鍵登錄方法推薦。小編覺得挺不錯的，現在分享給大家，也給大家做個參考。2016-05-05
這篇文章介紹了JavaScript的防抖和節(jié)流案例的代碼實現和概念.包含詳細的代碼,希望對你有所幫助2021-06-06
用戶可能從Excel或者其他地方直接復制粘貼,這時候提交到后端會導致獲取的用戶輸入中包含一些特殊的不可見字符,本文主要介紹了js正則校驗特殊的不可見字符的具體實現,具有一定的參考價值,感興趣的可以了解一下2024-06-06
這篇文章主要介紹了在HTML代碼中使用JavaScript代碼的例子,本文是入門級示例,初學js的同學不要錯過,需要的朋友可以參考下2014-10-10
最近一直在學習d3.js，大家都知道d3.js是一個非常不錯的數據可視化庫，我們可以用它來做一些比較酷的東西，比如可以來顯示一些簡單的網絡拓撲圖，這篇文中就通過實例代碼給大家介紹了如何利用d3.js實現簡單的網絡拓撲圖，有需要的朋友們可以參考借鑒，下面來一起看看吧。2016-11-11
利用ES6的Promise.all實現至少請求多長時間的實例
下面小編就為大家?guī)硪黄肊S6的Promise.all實現至少請求多長時間的實例。小編覺得挺不錯的，現在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-08-08
這篇文章主要介紹了微信小程序實現指定顯示行數多余文字去掉用省略號代替的方法,需要的朋友可以參考下2018-07-07
slice()方法和splice()方法都是原生js中對數組操作的方法。那么他兩種有什么區(qū)別呢？今天通過本文教程給大家簡單介紹下,需要的朋友可以參考下2017-03-03
這篇文章主要為大家詳細介紹了JS實現掃雷項目總結，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-05-05