jQuery_review之表单中的隔行变色以及关键字高亮显示

在很多项目中,当然可以避免使用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>

jQuery_review之表单中的隔行变色以及关键字高亮显示,布布扣,bubuko.com

时间: 2024-12-20 16:59:11

jQuery_review之表单中的隔行变色以及关键字高亮显示的相关文章

javascript小实例,实现99乘法表及隔行变色

人生短暂,废话不多说,直奔主题! 这个小实例的要求: 实现在页面中输出99乘法表.(要求:以每三行为一组,实现隔行变色(颜色为白,红,黄(也可自己定义)),鼠标滑过每一行,行背景颜色变为蓝色,鼠标离开又恢复原来的颜色),隔行变色的效果需要用if和switch两种判断方式都能实现: 额,分析一下实例要求:一个99乘法表,一个多方法的隔行变色,鼠标滑过变另外一个颜色,离开恢复原色.  嗯,我们一步步来吧! 99乘法表的实现,我相信很多人都知道怎么实现,无非是2个for循环得到的结果,这里我就不多做解

用angular实现隔行变色

在写隔行变色时应该知道的几个指令.ng-app :angular入口,ng-repeat:控制重复,ng-cloak:防止闪烁,用法就是给一个class="ng-cloak",在样式表中写好 .ng-cloak{display:none}angular会在解析完代码时清除ng-cloak.还有另外一个防止闪烁的指令只ng-bind.当它作为标签属性时是不会显示出来的比如 <p ng-bind="msg"></p> 这个msg就不会出现闪烁.

用PHP读取MyAQL表单中全部数据并将数据整理翻页

要注意的是我们的PHP是嵌入在html中的 <html> <head> <title></title> <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"/> <style type="text/css"> </style> </head> <body> <

ThinkPHP学习 volist标签高级应用之多重嵌套循环、隔行变色(转)

Action代码: [php] public function index(){ $prod = I("get.prod_en"); $id = I("get.id", 0, "int"); if ($prod == ""){ $serviceProduct = array();//多重循环遍历的数组 [php] //数据保存在两张表中,这里通过循环初始化$serviceProduct数组 $service = M("

struts2 jsp表单提交后保留表单中输入框中的值 下拉框select与input

原文地址:struts2 jsp表单提交后保留表单中输入框中的值 下拉框select与input jsp页面 1     function dosearch() {2         if ($("#textValue").val() == "") {3                 $("#errortip").html("<font color='#FF0000'>请输入查询内容</font>")

表单中Readonly和Disabled的区别

Readonly和Disabled是用在表单中的两个属性,它们都能够做到使用户不能够更改表单域中的内容.但是它们之间有着微小的差别,总结如下: Readonly只针对input(text / password)和textarea有效,而disabled对于所有的表单元素都有效,包括select, radio, checkbox, button等. 但是表单元素在使用了disabled后,当我们将表单以POST或GET的方式提交的话,这个元素的值不会被传递出去,而readonly会将该值传递出去(

关于form表单中method里get和post的区别

在html里form可谓不得不用的一条代码,而form里的method选项里只有get和post两种. 因为我们大多数情况下只有post,所以get和post的区别很容易被遗忘. 简单区别来讲: get提交:提交的数据会在ul上进行提交,明文不加密,不安全,提交的数据有限. Post提交:以form表单封装的方式提交,适合提交大量的数据,相对安全. 虽然我们很少用get,但是我们一定常见到这种方式,只是我们很少注意到罢了. 比如,百度的搜索内容就是用的get方式,我们可以在url上看到我们都提交

jQuery的下面是动态表格动态表单中的HTML代码

动态表格动态表单中的Jquery代码 <script type="text/javascript" src="/include/jquery/jquery-1.1.3.1.pack.js"></script><script language="javascript">$("#addjobline").css("cursor","pointer");$(

监听表单中的内容变化

一.总结: 今天项目中要给表单控件添加搜索选择的效果,如下: 红框圈住的表单被点击之后,弹出如下框: 然后根据用户的搜索条件要显示查询结果供用户选择. 总结如何监听表单中的内容变化: 方法一: 1. 实现代码: 上面的代码实现出来的效果(类似百度搜索框)是,当用户在搜索框中输入查询条件,每当搜索框中的内容改变就会触发监听事件,并向服务器发送请求,搜索框下方相应的就显示查询到的结果.每次在将查询到的结果设置在界面之前都将前一次查询显示的数据从界面上remove掉,用这个方法来解决界面显示多条重复数