双色表格（含页面内容查找功能）（JavaScript）

最新推荐文章于 2024-04-24 21:52:36 发布

今天我学习

最新推荐文章于 2024-04-24 21:52:36 发布

阅读量1.2k

点赞数 8

分类专栏： Web2课设 JavaScript 文章标签： javascript

本文链接：https://blog.csdn.net/weixin_48112113/article/details/119327625

版权

JavaScript 同时被 2 个专栏收录

11 篇文章 5 订阅

订阅专栏

Web2课设

8 篇文章 0 订阅

订阅专栏

1. 任务要求

1）简单过滤器的使用；

2）内容过滤器的使用；

3）如何获取指定元素的值？

4）如何设置元素的样式？

2. 需求说明

制作显示如下图所示的页面，要求如下。

（1）当页面加载完毕时，隔行变色，颜色值如上图所示，其中标题行字体颜色为白色，首行背景颜色值为：#00a40c，偶数行颜色值为#a5e5aa。

（2）当鼠标指向某一行时，该行颜色随之改变，当离开那行时，该行颜色恢复原样。

（3）输入相应的查找内容，点击“确定”按钮，内容所在单元格字体高亮，清空文本框内容，点击“确定”按钮，查找到单元格字体颜色恢复。

3. 实现思路

1）使用addClass()方法设定表格对应行的属性。

2）过滤选择器通过特定的过滤规则来筛选元素。例：$(“tr:first”)选取tr中的第一个元素。$(“tr:even”)选取tr中的偶数行元素。

3）设置鼠标事件。当鼠标滑过，对应表格行，同样通过addClass()方法改变属性。当鼠标移除，需要将对应表格颜色等属性改回原来值。

4）click()事件。当点击“确定”按钮，使用:contains(text)将表格中含有“text”的元素选取出来，改变选取元素的字体颜色以及加粗，达到查找的效果。

5）需要判断文本框中是否有内容（text.length()），当文本框中没有内容时，依然通过addClass()方法将属性设回初始值。

4. 实现代码

<script language="javascript">
	$(document).ready(function(e) {
    	$("tr:first").addClass('tableHeader');
		$("tr:even:not(:first)").addClass('evenStyle');
		$("tr:not(:first)").mousemove(function(e) {
            $(this).addClass("over");
        });
		$("tr:not(:first)").mouseout(function(e) {
            $(this).removeClass("over");
        });
		$("#btn").click(function(e) {
			var text=$("#name").val();
			if (text.length>0)
            	$("td:contains("+text+")").css({"font-weight":"bold","color":"red"});
			else
				$("td:contains("+text+")").css({"font-weight":"normal","color":"black"}); 
        });
		
	});
</script>

5. 运行结果

输入需要查找信息，存在其信息的字体加粗，颜色变成红色

6. 全部代码

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>双色表格</title>
<style type="text/css">
h1{
	color:#063;
	font-weight:bold;
	font-family:"黑体";
	text-align:center;
}
.datalist{
	border:1px solid #007108;
	background-color:#d9ffdc;
	font-size:14px;
	border-collapse:collapse;
	width:800px;
	margin:0px auto;
}
.datalist td{
	border:1px solid #007108;
	text-align:center;
	line-height:20px;
	padding:4px 10px;
}
.tableHeader{
	background:#00a40c;
	color:#FFF;
	font-weight:bold;
}
.evenStyle{
	background-color:#a5e5aa;
}
.over{
	background-color:#ff9;
}
</style>
<script type="text/javascript" src="js/jquery-1.12.4.js">
</script>
<script language="javascript">
	$(document).ready(function(e) {
    	$("tr:first").addClass('tableHeader');
		$("tr:even:not(:first)").addClass('evenStyle');
		$("tr:not(:first)").mousemove(function(e) {
            $(this).addClass("over");
        });
		$("tr:not(:first)").mouseout(function(e) {
            $(this).removeClass("over");
        });
		$("#btn").click(function(e) {
			var text=$("#name").val();
			if (text.length>0)
            	$("td:contains("+text+")").css({"font-weight":"bold","color":"red"});
			else
				$("td:contains("+text+")").css({"font-weight":"normal","color":"black"}); 
        });
		
	});
</script>
</head>
<body>
<h1>学生信息表</h1>
<!-- <p>&nbsp; </p> -->
<form name="form1" method="post" action="">
  <div align="center"><label>查找信息：</label>
    <input type="text" name="name" id="name">
    <input type="button" name="btn" id="btn" value="确定">
  </div>
</form>

<table width="100%" border="0" cellspacing="0" cellpadding="0" class="datalist">
  <tr>
    <td>学号</td>
    <td>姓名</td>
    <td>性别</td>
    <td>年龄</td>
    <td>电话号码</td>
  </tr>
  <tr>
    <td>20141201</td>
    <td>陈奕炫</td>
    <td>男</td>
    <td>18</td>
    <td>13882424456</td>
  </tr>
  <tr>
    <td>20141202</td>
    <td>李伟涛</td>
    <td>男</td>
    <td>19</td>
    <td>13882424457</td>
  </tr>
  <tr>
    <td>20141203</td>
    <td>卢志宏</td>
    <td>男</td>
    <td>18</td>
    <td>13882424461</td>
  </tr>
  <tr>
    <td>20141204</td>
    <td>马晓松</td>
    <td>男</td>
    <td>17</td>
    <td>13882424458</td>
  </tr>
  <tr>
    <td>20141205</td>
    <td>朱俊亮</td>
    <td>男</td>
    <td>18</td>
    <td>13882424459</td>
  </tr>
  <tr>
    <td>20141206</td>
    <td>范汉华</td>
    <td>男</td>
    <td>19</td>
    <td>13882424460</td>
  </tr>
  <tr>
    <td>20141207</td>
    <td>陈荣辉</td>
    <td>男</td>
    <td>18</td>
    <td>13882424461</td>
  </tr>
  <tr>
    <td>20141208</td>
    <td>吴家良</td>
    <td>男</td>
    <td>18</td>
    <td>13882424462</td>
  </tr>
  <tr>
    <td>20141209</td>
    <td>张安享</td>
    <td>男</td>
    <td>19</td>
    <td>13882424463</td>
  </tr>
  <tr>
    <td>20141210</td>
    <td>吴耀东</td>
    <td>男</td>
    <td>18</td>
    <td>13882424464</td>
  </tr>
    <tr>
    <td>20141211</td>
    <td>黄小桂</td>
    <td>女</td>
    <td>18</td>
    <td>13882424465</td>
  </tr>
  <tr>
    <td>20141212</td>
    <td>陈永亮</td>
    <td>男</td>
    <td>18</td>
    <td>13882424466</td>
  </tr>
  <tr>
    <td>20141213</td>
    <td>黄博</td>
    <td>男</td>
    <td>18</td>
    <td>13882424467</td>
  </tr>
  <tr>
    <td>20141214</td>
    <td>张晓佳</td>
    <td>女</td>
    <td>18</td>
    <td>13882424468</td>
  </tr>
  <tr>
    <td>20141215</td>
    <td>林德佳</td>
    <td>男</td>
    <td>18</td>
    <td>13882424469</td>
  </tr>
</table>
</body>
</html>
</script>

今天我学习

关注

8
点赞
踩
16

收藏

觉得还不错? 一键收藏
0
评论
双色表格（含页面内容查找功能）（JavaScript）

1. 任务要求1）简单过滤器的使用；2）内容过滤器的使用；3）如何获取指定元素的值？4）如何设置元素的样式？2. 需求说明制作显示如下图所示的页面，要求如下。（1）当页面加载完毕时，隔行变色，颜色值如上图所示，其中标题行字体颜色为白色，首行背景颜色值为：#00a40c，偶数行颜色值为#a5e5aa。（2）当鼠标指向某一行时，该行颜色随之改变，当离开那行时，该行颜色恢复原样。（3）输入相应的查找内容，点击...
复制链接

扫一扫

专栏目录