jQuery_review之table中根据行选中，进行背景变色和checkbox选中
浏览数：31 /
时间：2015年06月09日
继续复习jQuery，对table来说，上面除了单选之外，还有多选的一个控制。对于多选来说，需要对多选的内容进行高亮显示，还应该在页面加载的时候，对已经默认选中的内容进行高亮。这些小功能也是复习jQuery选择器的一个很好地素材，有非常多的实现方式，不仅仅拘泥于一种，只要能将功能健壮的实现了，就是比较不错的了。
在一本资料上，看到了这样的一种jQuery的写法，还是非常的惊艳！ element[hasClassName?"removeClass":"addClass"]("className")，在中括号中间的内容就是一个三目表达式，三目表达式的结果可以与后面的参数行程一个操作。就是removeClass()还是addClass()。这还是非常不错的，也体现了jQuery设计的宗旨，从另一个角度来看，也体现了解释性语言的强大的一面，在这Java ，c++等语言中是不太好理解的。
<%@ 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>td:has(:checked)").parent().find("td").addClass("selected");
$("tbody>tr").click(function(){
if($(this).find(":checkbox").attr("checked")){
$(this).find("td").removeClass("selected")
.end().find(":checkbox").attr("checked",false);
}else{
$(this).find("td").addClass("selected")
.end().find(":checkbox").attr("checked",true);
}
});
$(":checkbox").click(function(){
$(this).parents("tr").trigger("click");
});
})
</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="checkbox" value="fruit1"></td><td>orangle</td><td>$10.00</td><td>2013-01-12</td></tr>
<tr><td><input type="checkbox" value="fruit2"></td><td>apple</td><td>$9.00</td><td>2013-01-22</td></tr>
<tr><td><input type="checkbox" value="fruit3" checked="true"></td><td>tomato</td><td>$2.00</td><td>2013-04-23</td></tr>
<tr><td><input type="checkbox" value="fruit4"></td><td>banana</td><td>$1.00</td><td>2013-03-13</td></tr>
<tr><td><input type="checkbox" value="fruit5"></td><td>eggplant</td><td>$7.00</td><td>2013-05-12</td></tr>
<tr><td><input type="checkbox" value="fruit6"></td><td>orangle</td><td>$10.00</td><td>2013-01-12</td></tr>
<tr><td><input type="checkbox" value="fruit7"></td><td>apple</td><td>$9.00</td><td>2013-01-22</td></tr>
<tr><td><input type="checkbox" value="fruit8"></td><td>banana</td><td>$1.00</td><td>2013-03-13</td></tr>
<tr><td><input type="checkbox" value="fruit9"></td><td>tomato</td><td>$2.00</td><td>2013-04-23</td></tr>
<tr><td><input type="checkbox" value="fruit0"></td><td>eggplant</td><td>$7.00</td><td>2013-05-12</td></tr>
</tbody>
</table>
</body>
</html>
郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。
