编程技术

Document

1 请使用js、css、html技术实现以下页面，表格内容根据查询条件动态变化。

 1.1 创建css文件，用于编辑style

        注意：

        1.背景颜色用ppt的取色器来获取：

                先点击ppt的形状轮廓，然后点击取色器，吸颜色，然后再点击形状轮廓的其他轮廓颜色，即可获取到对应颜色。

 

        2.表格间的灰色线是在th和td中用border属性设置的；

        3.在js中拼接字符串时，不允许在一对双引号中继续出现双引号，内部应使用单引号：

str += "<tr bgcolor='#EAF3F2'>";

        4. 使用css的外部样式表时，外部样式会最后把html里设置的样式覆盖掉！

        5.查询地区按钮实现逻辑：先获取选择框的text文本，再创建一个方法，输入是原始表格数据，输出是新数据，通过获取原始表格每一行第一列的数据与text文本进行判断，如果相等，则新数据使用push方法添加整行数据，如果不相等直接break，开始下一行判断。注意，要考虑text为“全部”的情况。在得到新的表格数据后，先清空原来的表格数据，再将新数据作为输入再次调用原来创建动态表格的方法即可。

        css文件如下：

select{
	margin-right: 10px;
}

body{
	height: 800PX;
	background: linear-gradient(to bottom,#DCF3F2,#A3E5E7);
}

button{
	color: white;
	background-color: #007A89;
	border-color: #007A89;
}

hr{
	border: 0.1px dashed black;
}

p{
	text-align: right;
	font-size: 13px;
	margin-top: 0;
	margin-bottom: 0;
}

table{
	width: 100%;
	border-collapse: collapse;
}

th{
	background-color: #00A8A6;
	color: white;
}

th,td{
	text-align: center;
	border:  solid silver;
	font-size: 14px;
	padding: 0.1px;
}

       js文件如下：

function getTbodyDatas(tableDatas){
	var str = "";
	for(var i = 0;i<tableDatas.length;i++){
		if(i%2==0||i==0){
			str += "<tr bgcolor='#EAF3F2'>";
		}else{
			str += "<tr bgcolor='#FAFFFF'>";
		}
		for(var j = 0;j<tableDatas[i].length;j++){
			str = str+"<td>"+tableDatas[i][j]+"</td>";
		}
		str += "</tr>";
	}
	return str;
};

function getNewDatas(tableDatas){
	var newDatas = [];
	var selectLabel = document.getElementById("location");
	var selectText = selectLabel.options[selectLabel.selectedIndex].text;
	if(selectText == "全部"){
		return tableDatas;
	}
	for(var i = 0;i<tableDatas.length;i++){
		if(tableDatas[i][0]==selectText){
			newDatas.push(tableDatas[i]);
		}
	}
	console.log(newDatas);
	return newDatas;
}

function getLocation(){
	document.getElementById("tbodyDatas").innerHTML = "";
	var newDatas = getNewDatas(tableDatas);
	document.getElementById("tbodyDatas").innerHTML = getTbodyDatas(newDatas);

};

        html文件如下：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<link rel="stylesheet" type="text/css" href="../css/date0723.css"/>
		<title></title>
	</head>
	<body>
		<label for="location">地区</label>
		<select id="location">
			<option>全部</option>
			<option>福州</option>
			<option>南平</option>
			<option>宁德</option>
		</select>
		
		<label for="state">状态</label>
		<select id="state">
			<option>全部</option>
		</select>
		
		<label for="v-class">电压等级</label>
		<select id="v-class">
			<option>全部</option>
		</select>
		
		<label for="property">资产属性</label>
		<select id="property">
			<option>全部</option>
		</select>
		
		<button type="button" onclick="getLocation(tableDatas)" class="bottom-button">查询</button>
		<button type="button" class="bottom-button">重置</button>
		<button type="button" class="bottom-button">导出</button>
		<button type="button" class="bottom-button">历史统计</button>
		
		<hr>
		
		<p>当前页 10 条记录/5587条记录</p>
		
		<table>
			<thead>
				<tr>
					<th>地区</th>
					<th>线路1</th>
					<th>线路2</th>
					<th>线路3</th>
					<th>线路5</th>
					<th>线路5</th>
					<th>线路6</th>
					<th>线路7</th>
					<th>线路8</th>
				</tr>
			</thead>
			
			<tbody id="tbodyDatas">
			</tbody>
		</table>
		
		<script src="../js/date0723.js"></script>
		<script>
			var tableDatas = [
							 ["福州",1,2,5,3,5,5,6,8],
							 ["宁德",1,22,5,3,5,5,6,8],
							 ["福州",1,42,5,3,5,5,6,8],
							 ["南平",1,52,5,3,5,5,6,8],
						    ];
			document.getElementById("tbodyDatas").innerHTML=getTbodyDatas(tableDatas);
		</script>
		
		<div align = "center">
			<button type="button" class="last-button">前一页</button>
			<button type="button" class="last-button">1</button>
			<button type="button" class="last-button">2</button>
			<button type="button" class="last-button">3</button>
			<button type="button" class="last-button">4</button>
			<button type="button" class="last-button">5</button>
			<button type="button" class="last-button">后一页</button>
		</div>
	</body>
</html>

        运行结果：