jQuery_review之表单中的隔行变色以及关键字高亮显示
来源:互联网 发布:淘宝手机版店招尺寸 编辑:程序博客网 时间:2024/05/21 09:36
在很多项目中,当然可以避免使用table,而使用div来替代,但是为了能够快速的交付项目,而且对网络优化以及搜索引擎没有太高的妥协的话,我们当然可以使用喜闻乐见的表格来进行布局。使用表格布局非常适合项目团队中有很多都是新成员,技术尚未成熟到可以从容判断div的布局会带来什么问题的情况。下面是使用table进行布局实现表格中隔行变色以及关键字高亮显示的jQuery实现。
这里要注意几个事情就是table的CSS设置中,thead以及tbody中是不好设置border属性的,所以只能妥协使用td的border-top或者border-bottom属性来为表格增加上下的隔断。如何对表格实现隔行变色呢,这里就用到了jQuery提供的选择器,:odd 是选择第偶数个元素。:even是选择第基数个元素,在jQuery中选择子元素的顺序是从1开始的,但是其他的基本上都是从0开始的,这个地方要注意一下。还有一个,就是如何对包含关键字的行进行高亮显示呢?可以使用jQuery的内容选择器。:contains('keyWord')这样就能获取当前元素中含有关键字的哪一些。下面是这个DEMO的例子:
<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html> <head> <script type="text/javascript" src="jquery-1.8.3.js"></script> <script type="text/javascript"> $(document).ready(function(){ $("tbody>tr:odd").css("background-color","#FEF2E8"); $("tbody>tr:even").css("background-color","white"); $("tbody>tr:contains('tomato')").css("background-color","#F8CE58"); }) </script> <style type="text/css"> table{ text-align:center; width:400px; height:100px; border:solid #000 1px; } thead tr td{ border-bottom:solid #000 1px; } </style> </head> <body> <table> <thead> <tr><td>fruit</td><td>price</td><td>date</td></tr> </thead> <tbody> <tr><td>orangle</td><td>$10.00</td><td>2013-01-12</td></tr> <tr><td>apple</td><td>$9.00</td><td>2013-01-22</td></tr> <tr><td>tomato</td><td>$2.00</td><td>2013-04-23</td></tr> <tr><td>banana</td><td>$1.00</td><td>2013-03-13</td></tr> <tr><td>eggplant</td><td>$7.00</td><td>2013-05-12</td></tr> <tr><td>orangle</td><td>$10.00</td><td>2013-01-12</td></tr> <tr><td>apple</td><td>$9.00</td><td>2013-01-22</td></tr> <tr><td>banana</td><td>$1.00</td><td>2013-03-13</td></tr> <tr><td>tomato</td><td>$2.00</td><td>2013-04-23</td></tr> <tr><td>eggplant</td><td>$7.00</td><td>2013-05-12</td></tr> </tbody> </table> </body></html>
0 0
- jQuery_review之表单中的隔行变色以及关键字高亮显示
- 隔行变色,高亮显示
- 隔行变色以及选中高亮/变色
- JS_隔行变色高亮显示
- Android 高亮变色显示文本中的关键字
- jQuery_review之table根据内容分组进行折叠显示以及,折叠之后高亮显示的实现
- jquery table隔行变色 鼠标高亮
- js案例-5 隔行变色高亮
- javascript实现隔行变色和高亮
- div li隔行变色 鼠标悬浮高亮显示 jquery控制css样式
- div li隔行变色 鼠标悬浮高亮显示 jquery控制css样式
- jQuery隔行变色鼠标划过高亮度显示
- (28)表格隔行变色,并且鼠标移入高亮显示,鼠标移出显示原来的颜色
- 【有人@我】Android中高亮变色显示文本中的关键字
- Android中高亮变色显示文本中的关键字
- Android中高亮变色显示文本中的关键字
- Android中高亮变色显示文本中的关键字
- js实现表格隔行变色和鼠标移入高亮
- POJ_1045_Bode Plot
- Linked List Cycle II(LeetCode)
- 深入理解Servlet/JSP之“Cookie和Session原理”
- 能力的证据。
- Lotus Notes/Domino 删除用户
- jQuery_review之表单中的隔行变色以及关键字高亮显示
- 2014-7-26 sql 学习笔记——sql 行专列
- 404、500、502等HTTP状态码介绍
- 函数配接器-摘自《C++沉思录》Andrew Koenig
- hdoj2565 放大的X
- 1-2(补充)新手必备Demo的介绍(初稿).md
- UI 线程和用户线程
- HDU1003
- 常见错误