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

最新推荐文章于 2021-08-24 11:02:06 发布

心柠

最新推荐文章于 2021-08-24 11:02:06 发布

阅读量8.4k

点赞数

本文链接：https://blog.csdn.net/u011498933/article/details/70228357

版权

初始化加载数据，并默认添加一行背景色

代码如下：

<!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
点赞
踩
3

收藏

觉得还不错? 一键收藏
2
评论
用Bootstrap创建表格，并初始化一行背景色

初始化加载数据，并默认添加一行背景色代码如下： $(document).ready(function(){ singleIfrTab1(); getTdValue(); }); //加载表格(ifrm) function singleIfrTab1(){ var jsonDat
复制链接

扫一扫