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

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

        注意：

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

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

 

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

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

str += "";

        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[i][j]+"";
		}
		str += "";
	}
	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

        html文件如下：

	
		
		
		
	
	
		地区
		
			全部
			福州
			南平
			宁德
		
		
		状态
		
			全部
		
		
		电压等级
		
			全部
		
		
		资产属性
		
			全部
		
		
		查询
		重置
		导出
		历史统计
		
		

		
		
当前页 10 条记录/5587条记录
		
		

			

				

					
地区
					
线路1
					
线路2
					
线路3
					
线路5
					
线路5
					
线路6
					
线路7
					
线路8
				
			
			
			

			
		
		
		
		
		
		

			前一页
			1
			2
			3
			4
			5
			后一页
		
	

        运行结果：