基于Bootstrap table組件實現(xiàn)多層表頭的實例代碼
在做私活的時候，有一個需求是要在頁面上實現(xiàn)多層表頭。一開始有點懵，不知道怎么來實現(xiàn)，我回想起在JFTT的時候，曾用過Flex版的多層表頭，不過那離現(xiàn)在已經(jīng)很久遠(yuǎn)了，久遠(yuǎn)到Flex已經(jīng)被淘汰出局了。于是在網(wǎng)上折騰了好一會兒，終于找到一款用起來簡單，效果又很不錯的組件——Bootstrap-table。
Bootstrap-table還有很多強(qiáng)大的功能，但這篇文章我們把關(guān)注點只放在多層表頭上，關(guān)注點確定后，這篇博客就很簡單了，但我覺得還是很有必要推而廣之——因為之前在看董卿主持的《詩詞大會》，里面有很多基礎(chǔ)的知識，竟然有很多人都答不上來，搞得我一度很“囂張”，對老婆夸下?？谡f我也能過第一輪，但事實是我過不了——我也不會寫“碧玉妝成一樹高，萬條垂下綠絲絳（tao）”中的tao字。
所以，文章不在于其難度，而在于其意義——在月球上邁上一小步和在地球上邁上一小步差別就在于“這是個人邁出的一小步，但卻是人類邁出的一大步?！?/p>
0.效果圖
1.實現(xiàn)方法
<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”對應(yīng)的第二層表頭就不需要指定了。
第三步，啟用bootstrap-table。
<table data-toggle="table"> </table>
總結(jié)
以上所述是小編給大家介紹的Bootstrap table實現(xiàn)多層表頭的實例代碼，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！
相關(guān)文章
js中net::ERR_FILE_NOT_FOUND報錯的解決
本文主要介紹了js中net::ERR_FILE_NOT_FOUND報錯的解決，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2023-07-07
Bootstrap學(xué)習(xí)筆記之環(huán)境配置(1)
這篇文章主要為大家詳細(xì)介紹了Bootstrap學(xué)習(xí)筆記之環(huán)境配置的具體操作方法,具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-12-12
這篇文章主要介紹了使用apifm-wxapi模塊中的問題及講解決,文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下2019-08-08
用JS動態(tài)設(shè)置CSS樣式常見方法小結(jié)(推薦)
本文給大家總結(jié)了js動態(tài)設(shè)置css樣式的常見方法，非常實用，對js設(shè)置css樣式相關(guān)知識感興趣的朋友一起學(xué)習(xí)吧2016-11-11
js實現(xiàn)動態(tài)添加、刪除行、onkeyup表格求和示例
動態(tài)添加、刪除行想必大家并不陌生，下面為大家介紹通過js是如何實現(xiàn)的，有此需求的朋友可不要錯過了哈2013-08-08
javascript實現(xiàn)div浮動在網(wǎng)頁最頂上并帶關(guān)閉按鈕效果實例
我們有時會看到有些網(wǎng)站最頂部一直會跟著我們滾動而滾動了，這種方法其實很簡單，下面我來給大推薦一個javascript實現(xiàn)div浮動在網(wǎng)頁最頂上并帶關(guān)閉按鈕效果2013-08-08
我最開始寫過一個富交互的頁面，其中的JavaScript代碼包含了很多html標(biāo)簽2012-09-09
這篇文章主要為大家詳細(xì)介紹了js實現(xiàn)頁面a向頁面b傳參的方法，感興趣的小伙伴們可以參考一下2016-05-05
做前端，需要選擇元素，下面是實現(xiàn)代碼，一個原生的html元素選擇器類似jquery選擇器，很棒，很實用2014-10-10
JavaScript獲取偽元素(Pseudo-Element)屬性的方法技巧
這篇文章主要介紹了JavaScript獲取偽元素(Pseudo-Element)屬性的方法技巧,本文直接給出實現(xiàn)代碼,需要的朋友可以參考下2015-03-03