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> </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>