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

最新推荐文章于 2021-11-23 19:23:28 发布

陈字文

最新推荐文章于 2021-11-23 19:23:28 发布

阅读量2.1k

点赞数

分类专栏： JavaScript相关

本文链接：https://blog.csdn.net/ziwen00/article/details/38141183

版权

JavaScript相关专栏收录该内容

28 篇文章 0 订阅

订阅专栏

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

收藏

觉得还不错? 一键收藏
1
评论
jQuery_review之表单中的隔行变色以及关键字高亮显示

在很多项目中，当然可以避免使用table，而使用div来替代，但是为了能够快速的交付项目，而且对网络优化以及搜索引擎没有太高的妥协的话，我们当然可以使用喜闻乐见的表格来进行布局。使用表格布局非常适合项目团队中有很多都是新成员，技术尚未成熟到可以从容判断div的布局会带来什么问题的情况。下面是使用table进行布局实现表格中隔行变色以及关键字高亮显示的jQuery实现。这
复制链接

扫一扫