用Bootstrap创建表格，并初始化一行背景色

来源：互联网发布：nba2k17邓肯捏脸数据编辑：程序博客网时间：2024/06/10 04:54
初始化加载数据，并默认添加一行背景色
代码如下：
<!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>
效果图如下：
0 0