码迷,mamicode.com
首页 > Web开发 > 详细

jQuery_review之table中根据行选中,进行背景变色和radio选中

时间:2014-07-26 15:11:20      阅读:333      评论:0      收藏:0      [点我收藏+]

标签:style   java   color   使用   os   io   cti   html   

    在各种WEB系统中经常可以看到类似的操作,点击中列表的某一行,然后当前行就会变成其他的颜色,并且其中的radio就会被选中。并且一般还会鼠标滑过的时候的动态特效,比如鼠标滑过当前行的时候会有一个变色的样式。趁着复习jQuery的机会,看一下使用jQuery来实现这个功能的步骤。

   在这个功能当中,有一个需要注意的小知识点:如何增加一个radio?在HTML中,增加一个HTML使用如下的代码<input type="radio" name="fruit">这样子,HTML解析引擎会帮帮我们做一件事情,就是会为我们维持这样一个规则,同一个name的radio框在同一时间只能被选择一个,这个也是为什么这个框通常被称之为单选框的原因了。此外,无论在哪个功能的实现中,最重要的当然就是如何选中当前页面的元素了。在这个DEMO中,会用到下面几种选择的方式。element.hasClass("aClass")这个会返回一个boolean值,这个是用来判断当前的元素是不是含有aClass样式。element.removeClass(‘aClass‘)是从element上删除aClass这个类型。element.find(selector)是从当前的element元素中找到符合选择器的元素,在jQuery凡是能够将选择器作为参数传入的函数,都是功能比较强大的,例如filter(),例如has()等。


<%@ 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").click(function(){
  			$(this).find(":radio").attr("checked",true)
  			  .end().find("td").addClass("selected")
  			  .end().siblings().find("td").removeClass("selected");
  		});
  	})
  </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;
  	}
  	td.selected{
  		background-color:#E49B1A;
  	}
  	td.hover{
  		background-color:#EAFFE6;
  	}
  </style>
  </head>
  <body>
  	<table>
  		<thead>
  			<tr><td></td><td>fruit</td><td>price</td><td>date</td></tr>
  		</thead>
  		<tbody>
  			<tr><td><input type="radio" name="fruit"></td><td>orangle</td><td>$10.00</td><td>2013-01-12</td></tr>
  			<tr><td><input type="radio" name="fruit"></td><td>apple</td><td>$9.00</td><td>2013-01-22</td></tr>
  			<tr><td><input type="radio" name="fruit"></td><td>tomato</td><td>$2.00</td><td>2013-04-23</td></tr>
  			<tr><td><input type="radio" name="fruit"></td><td>banana</td><td>$1.00</td><td>2013-03-13</td></tr>
  			<tr><td><input type="radio" name="fruit"></td><td>eggplant</td><td>$7.00</td><td>2013-05-12</td></tr>
  			<tr><td><input type="radio" name="fruit"></td><td>orangle</td><td>$10.00</td><td>2013-01-12</td></tr>
  			<tr><td><input type="radio" name="fruit"></td><td>apple</td><td>$9.00</td><td>2013-01-22</td></tr>
  			<tr><td><input type="radio" name="fruit"></td><td>banana</td><td>$1.00</td><td>2013-03-13</td></tr>
  			<tr><td><input type="radio" name="fruit"></td><td>tomato</td><td>$2.00</td><td>2013-04-23</td></tr>
  			<tr><td><input type="radio" name="fruit"></td><td>eggplant</td><td>$7.00</td><td>2013-05-12</td></tr>
  		</tbody>
  	</table>
  </body>
</html>


jQuery_review之table中根据行选中,进行背景变色和radio选中,布布扣,bubuko.com

jQuery_review之table中根据行选中,进行背景变色和radio选中

标签:style   java   color   使用   os   io   cti   html   

原文地址:http://blog.csdn.net/ziwen00/article/details/38142605

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!