用Bootstrap建立表格，並初始化一行背景色
阿新 • • 發佈：2019-02-08
初始化載入資料，並預設新增一行背景色
程式碼如下：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <link rel="stylesheet" href="./../../css/bootstrap.min.css"> <link rel="stylesheet" href="./../../css/bootstrap-table.min.css"> <script src="./../../js/jquery.min.js"></script> <script src="./../../js/bootstrap.min.js"></script> <script type="text/javascript" src="./../../js/bootstrap-table.min.js" ></script> <script> $(document).ready(function(){ singleIfrTab1(); getTdValue(); }); //載入表格(ifrm) function singleIfrTab1(){ var jsonDataStr = '[{"col1":"1","col3":"14774","col2":"XXXX"},{"col1":"2","col3":"38926","col2":"XXX1"},{"col1":"3","col3":"18926","col2":"XXXX"},{"col1":"4","col3":"30926","col2":"XXXX"},{"col1":"5","col3":"28926","col2":"XXXX"},{"col1":"6","col3":"10926","col2":"XXXX"},{"col1":"7","col3":"40926","col2":"XXXX"},{"col1":"8","col3":"45926","col2":"XXXX"},{"col1":"9","col3":"323926","col2":"XXXX"},{"col1":"10","col3":"38346","col2":"XXXX"},{"col1":"11","col3":"31226","col2":"XXXX"},{"col1":"12","col3":"12326","col2":"XXXX"},{"col1":"13","col3":"23426","col2":"XXXX"},{"col1":"14","col3":"38456","col2":"XXXX"},{"col1":"15","col3":"34926","col2":"XXXX"},{"col1":"16","col3":"33336","col2":"XXXX"},{"col1":"17","col3":"34522","col2":"XXXX"},{"col1":"18","col3":"28346","col2":"XXXX"},{"col1":"19","col3":"33626","col2":"XXXX"}]'; var jsonData = JSON.parse(jsonDataStr); $('#ifrTab1').bootstrapTable('destroy').bootstrapTable({ data: jsonData }); } function getTdValue(){ var tableId = document.getElementById("ifrTab1"); for(var i=1;i<tableId.rows.length;i++) { if('XXX1'==tableId.rows[i].cells[1].innerHTML){ tableId.rows[i].setAttribute("style","background: #fedd7c;"); } } } </script> <style> /*ifr_div start*/ .ifr_div{ width:360px; height:730px; border:1px solid #FFF; font-size: 18px; font-family:'微軟雅黑'; position:absolute; z-index: 100; } .tab_tit{ width:360px; height:60px; background: #1f71a9; color:#fff; font-weight: bold; } .tab_tit1, .tab_tit2, .tab_tit3, .tab_tit4{ float:left; height:60px; line-height:60px; display:inline-block; text-align: center; } .tab_tit1{ width:56px; } .tab_tit2{ width:165px; } .tab_tit3{ width:135px; } .bootstrap-table .table thead>tr, .bootstrap-table .table tbody>tr { background: #c9e6f6; color: #000; } /*ifr_div end*/ </style> </head> <body> <!--income_page ifr_div start--> <div class = 'ifr_div' > <div class = 'tab_tit' > <div class = 'tab_tit1' >排序</div> <div class = 'tab_tit2' >專案</div> <div class = 'tab_tit3' >數值</div> </div> <table class="table table-condensed" id = 'ifrTab1' data-row-style="rowStyle"> <thead> <tr> <th data-field="col1" name='col1' valign="middle" align="center">-</th> <th data-field="col2" name='col2' valign="middle" align="center">全國總計</th> <th data-field="col3" name='col3' valign="middle" align="center">17774</th> </tr> </thead> </table> </div> <!--income_page ifr_div end--> </body> </html>
效果圖如下：
