选中和取消选中复选框实现背景变色和取消变色:
为了提高表格这种新闻列表的人性化程度，当前有很多措施，最为常见是鼠标悬浮行变色或者隔行变色，本章介绍一下另一种形式，就是前面有一个复选框，选中和取消选中复选框能够实现对应行背景变色或者取消变色，代码如下:
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>蚂蚁部落</title>
<style type="text/css">
body, table, td,
{
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
}
.h
{
background:#f3f3f3;
color:#000;
}
.c
{
background:#ebebeb;
color:#000;
}
</style>
<script type="text/javascript" src="mytest/jQuery/jquery-1.8.3.js"></script>
<script type="text/javascript">
$(function(){
$("#table tr").hover(function(){
$(this).toggleClass("h");
})
$("input").click(function(){
var d=$(this);
d.closest(‘tr‘).toggleClass("c",d.attr("checked")) ;
})
})
</script>
</head>
<body>
<div id="aaa">
<form>
<table id="table" width="50%" border="0" cellpadding="3" cellspacing="1">
<tr>
<td align="center"><input type="checkbox" name="checkbox" value="checkbox" /></td>
<td>蚂蚁部落</td>
<td>蚂蚁部落</td>
</tr>
<tr>
<td align="center"><input type="checkbox" name="checkbox" value="checkbox" /></td>
<td>蚂蚁部落</td>
<td>蚂蚁部落</td>
</tr>
<tr>
<td align="center"><input type="checkbox" name="checkbox" value="checkbox" /></td>
<td>蚂蚁部落</td>
<td>蚂蚁部落</td>
</tr>
<tr>
<td align="center"><input type="checkbox" name="checkbox" value="checkbox" /></td>
<td>蚂蚁部落</td>
<td>蚂蚁部落</td>
</tr>
<tr>
<td align="center"><input type="checkbox" name="checkbox" value="checkbox" /></td>
<td>蚂蚁部落</td>
<td>蚂蚁部落</td>
</tr>
<tr>
<td align="center"><input type="checkbox" name="checkbox" value="checkbox" /></td>
<td>蚂蚁部落</td>
<td>蚂蚁部落</td>
</tr>
<tr>
<td align="center"><input type="checkbox" name="checkbox" value="checkbox" /></td>
<td>蚂蚁部落</td>
<td>蚂蚁部落</td>
</tr>
</table>
</form>
</div>
</body>
</html>
以上代码实现了我们的要求，鼠标悬浮的时候可以实现行变色，当选中或者取消选中复选框的时候能够实现对应行的背景变色或者取消变色效果，代码比较简单这里就不多介绍了，可以参阅相关阅读。
相关阅读:
1.hover()可以参阅jQuery的hover事件一章节。
2.toggleClass()函数可以参阅jQuery的toggleClass()方法一章节。
3.click事件可以参阅jQuery的click事件一章节。
4.closest()可以参阅jQuery的closest()函数一章节。
5.attr()函数可以参阅jQuery的attr()方法一章节。
原文地址是:http://www.softwhy.com/forum.php?mod=viewthread&tid=11542
更多内容可以参阅:http://www.softwhy.com/jquery/
时间： 2024-12-10 04:04:17