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

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. 实现代码

5. 运行结果 

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

 6. 全部代码