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

这篇具有很好参考价值的文章主要介绍了1 请使用js、css、html技术实现以下页面,表格内容根据查询条件动态变化。。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

1 请使用js、css、html技术实现以下页面,表格内容根据查询条件动态变化。,前端练习题,javascript,css,html

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

        注意:

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

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

1 请使用js、css、html技术实现以下页面,表格内容根据查询条件动态变化。,前端练习题,javascript,css,html

 1 请使用js、css、html技术实现以下页面,表格内容根据查询条件动态变化。,前端练习题,javascript,css,html

        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>

        运行结果:

1 请使用js、css、html技术实现以下页面,表格内容根据查询条件动态变化。,前端练习题,javascript,css,html

1 请使用js、css、html技术实现以下页面,表格内容根据查询条件动态变化。,前端练习题,javascript,css,html文章来源地址https://www.toymoban.com/news/detail-601692.html

到了这里,关于1 请使用js、css、html技术实现以下页面,表格内容根据查询条件动态变化。的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 编程笔记 html5&css&js 051 CSS表格2-2

    多数时候是按列设计表格样式的。 在HTML表格中,可以通过CSS来按列设置样式。以下是一个简单的例子: 在这个例子中,我们使用了CSS伪类选择器first-child和nth-child(n)来分别选择表格的每一列,并分别为它们设置了不同的样式。 按列设置样式列具实用性。

    2024年01月22日
    浏览(48)
  • 如何使用超简单的HTML和CSS代码来实现固定列的表格

    在网页开发中,表格是一个非常常见的组件,并且对于大多数开发者而言,不可或缺。尤其是在需要展示数据时,表格更是成为了一个必须品。然而,在一些情况下,表格数据非常复杂,导致其中的一些列需要被固定,使得它们随着页面的滚动而保持在屏幕上方。本文将介绍

    2024年02月04日
    浏览(37)
  • html-css-js使用axios和ajax获取接口并携带请求头+获取输入框或选择器内容

    需求:使用axios或者Ajax获取接口,有些需要获取到输入框,或者选择器内容之后传给接口,也就是写了几种不同请求的方法,网上有很多方法,本文章算是个归纳吧。 1.github下载axios 我框住的这俩下谁都行,我下的是第一个 Releases · axios/axios (github.com)  下载后解压打开找到

    2024年02月03日
    浏览(45)
  • web前端html+css页面内容的六种隐藏方式

    一、使用透明度 语法:opacity:0 注意:元素消失,但是还会占据空间,只是视觉看不出来   二、使用display 语法:display:none 注意:元素消失,不会占据空间   三、scale 缩放 语法:transform:scale(0)    值大于1放大,小于1缩小 注意:元素消失,但是还会占据空间   四、使用vis

    2024年02月08日
    浏览(53)
  • 【HTML+CSS+JS】登录注册页面大合集

    学JS也学了一段时间,正巧碰上了人工智能要调用人脸识别接口进行真人人脸识别,于是便 萌生了用人脸来进行注册和登录的想法 ,这样的话就需要开发一个登录注册页面,然后用JS绑定注册事件调用人脸识别接口进行登录注册 饭要一口一口吃,路要一步一步走,于是便在开

    2024年02月09日
    浏览(52)
  • HTML+CSS+JS 登录页面的代码结构入门

    本作品创建了一个代码简单清新的登录界面,并逐行解释了其框架,包含HTML代码,及对应的CSS代码和JS代码,提供对登录界面的一般框架的入门认识。 功能简介: 代码实现了一个清新登录界面,整体简明,并具有一定的交互功能。该设计代码是一个包含 HTML、CSS 和 JavaScrip

    2024年02月04日
    浏览(46)
  • 我是如何在react中把一个集成了html,css的内容放到页面中的

    首先把html,css内容进行一个变量化,然后利用useState()去初始化一个变量,最后同通过一个标签属性就好了dangerouslySetInnerHTML={变量} 通过这样我把 typora 导出的 html 就可以直接放到上面展示了。

    2024年02月05日
    浏览(56)
  • [HTML]Web前端开发技术16(HTML5、CSS3、JavaScript )表格课后练习网页标题:域标签的使用网页标题:美家装饰联系我们网页标题:登录界面网页标题问卷调查——喵喵画网页

    希望你开心,希望你健康,希望你幸福,希望你点赞! 最后的最后,关注喵,关注喵,关注喵,佬佬会看到更多有趣的博客哦!!! 喵喵喵,你对我真的很重要! 目录 前言 表格课后练习 网页标题:域标签的使用 网页标题:美家装饰联系我们 网页标题:登录界面 网页标题

    2024年01月24日
    浏览(45)
  • HTML5+CSS3学习笔记(九)前端页面六大布局(文档流布局、浮动布局、定位布局、表格布局、弹性布局、网格布局)

    本系列更多文章,可以查看专栏 HTML+CSS学习笔记 块级元素自上至下垂直排列,行内元素自左至右水平排列 块级元素独占一行,行内元素不会另起一行 默认情况下,height和width决定内容区的大小;内容区、内边距和边框构成可见区域的大小;外边距决定元素的位置 更多内容可

    2024年02月02日
    浏览(61)
  • html+css+js制作LOL官网,web前端大作业(3个页面+模拟登录+链接)

    index.html index.css introduce.html introduce.css shop.html shop.css 链接:https://pan.baidu.com/s/1VtaAMts5TnKk8CJtaL750Q 提取码:LDL6

    2024年02月02日
    浏览(57)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包