JS多条件查询（课表筛选为例）

最新推荐文章于 2024-03-16 23:21:06 发布

猴小小~~

最新推荐文章于 2024-03-16 23:21:06 发布

阅读量1.4k

点赞数

分类专栏： JS 文章标签： javascript

本文链接：https://blog.csdn.net/weixin_43821010/article/details/104118806

版权

JS 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

说明：
1、每行只可以选一个元素，点击本行其他元素会自动切换；
2、点击查询会把选中的内容弹出来，方便查看。

<!DOCTYPE HTML>
<html>
	<head>
		<meta charset="UTF-8">
		<title>全部课程</title>
		<style type="text/css">
			#select span{
				padding:0 3px;
				cursor:pointer;
				display:inline-block;
				border-radius:6px;
			}
			tr td{
				width:80px;
			}
		</style>
		<script type="text/javascript">
			window.onload=function(){
				//设置选中课程的背景颜色
				//先得到所有span标签
				var allSpan=document.querySelectorAll("span");
				//上来就给每个span标签添加事件
				for(var i=0;i<allSpan.length;i++){
					allSpan[i].onclick=function(){
						if(this.style.background=='lime'){
							this.style.background='';
						}else{
							//获取当前被点击span的class
							var thisSpan=document.getElementById(this.id).className;
							for(var j=0;j<(document.getElementsByClassName(thisSpan).length);j++){
								document.getElementsByClassName(thisSpan)[j].style.background='';
							}
							this.style.background='lime';
						}
					}
				};
				
				//获取所有变色的span标签
				var colorSpanList=new Array();
				document.getElementById("button").onclick=function(){
					for(var n=0;n<allSpan.length;n++){
						if(allSpan[n].style.background=='lime'){
							colorSpanList.push(allSpan[n].id);
						}
					}
					alert(colorSpanList);
					colorSpanList=[];
				};
			};
		</script>
	</head>
	<body>
		<div id="select">
			<table>
				<tr>
					<td>年级: </td><td></td>
					<td><span id="Leve1" class="nianji">Leve1</span></td>
					<td><span id="Leve2" class="nianji">Leve2</span></td>
					<td><span id="Leve3" class="nianji">Leve3</span></td>
					<td><span id="Leve4" class="nianji">Leve4</span></td>
					<td><span id="Leve5" class="nianji">Leve5</span></td>
					<td><span id="Leve6" class="nianji">Leve6</span></td>
					<td><span id="Leve7" class="nianji">Leve7</span></td>
					<td><span id="Leve8" class="nianji">Leve8</span></td>
					<td><span id="Leve9" class="nianji">Leve9</span></td>
				<tr>
				<tr>
					<td>课程: </td><td></td>
					<td><span id="Chinese" class="kecheng">语文</span></td>
					<td><span id="Math" class="kecheng">数学</span></td>
					<td><span id="Engilsh" class="kecheng">英语</span></td>
					<td><span id="Physics" class="kecheng">物理</span></td>
					<td><span id="Earth" class="kecheng">地理</span></td>
					<td><span id="History" class="kecheng">历史</span></td>
				<tr>
				<tr>
					<td>季节: </td><td></td>
					<td><span id="Spring" class="session">春季班</span></td>
					<td><span id="Summer" class="session">暑期班</span></td>
					<td><span id="Autom" class="session">秋季班</span></td>
					<td><span id="Winder" class="session">寒假班</span></td>
				<tr>
				<tr>
					<td>学期: </td><td></td>
					<td><span id="20" class="Time">19-20</span></td>
					<td><span id="21" class="Time">20-21</span></td>
				<tr>
				<tr>
					<td>正价班？: </td><td></td>
					<td><span id="yes" class="Money">正价课</span></td>
					<td><span id="no" class="Money">公开课</span></td>
				<tr>
				<tr><td><input type="submit" id="button" value="search"></td></tr>
			</table>
		</div>
	</body>
</html>

猴小小~~

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
JS多条件查询（课表筛选为例）

说明：1、每行只可以选一个元素，点击本行其他元素会自动切换；2、点击查询会把选中的内容弹出来，方便查看。3、使用了jQuery的选择器，所以注意jQuery文件的引入<!DOCTYPE HTML><html> <head> <meta charset="UTF-8"> <title>全部课程</title>...
复制链接

扫一扫