jQuery这个框架我一直在用，至于它的好处我就不多说了，这里讲一个实例：鼠标滑过,选中的行变色效果
这个效果在各大知名的邮箱系统中均有用到，平时要用原生态的javascript代码写的话……没有1000行也得有数百行代码，但是用jquery后只需20行左右的代码即可。再加上一些css样式的修饰。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>jumbot - demo</title>
<script type="text/javascript" src="http://jumbotcms.net/webui/jQueryPlugins/jquery-1.2.6.pack.js"></script>
<script type="text/javascript">
<!--
$(document).ready(function(){
$('.cooltable tbody tr:even').addClass('odd');
$('.cooltable tbody tr').hover(
function() {$(this).addClass('highlight');},
function() {$(this).removeClass('highlight');}
);
// 如果复选框默认情况下是选择的，变色.
$('.cooltable input[type="checkbox"]:checked').parents('tr').addClass('selected');
// 复选框
$('.cooltable tbody tr td').click(
function() {
if (!$(this).hasClass('oper')) {
if ($(this).parents('tr').hasClass('selected')) {
$(this).parents('tr').removeClass('selected');
$(this).parents('tr').find('input[type="checkbox"]').removeAttr('checked');
} else {
$(this).parents('tr').addClass('selected');
$(this).parents('tr').find('input[type="checkbox"]').attr('checked','checked');
}
}
}
);
});
function checkAllLine() {
if ($("#checkedAll").attr("checked") == true) { // 全选
$('.cooltable tbody tr').each(
function() {
$(this).addClass('selected');
$(this).find('input[type="checkbox"]').attr('checked','checked');
}
);
} else { // 取消全选
$('.cooltable tbody tr').each(
function() {
$(this).removeClass('selected');
$(this).find('input[type="checkbox"]').removeAttr('checked');
}
);
}
}
//-->
</SCRIPT>
<style type="text/css">
/*----------新的列表表格*/
.cooltable { width: 100%; border-collapse: collapse; border: solid; border-color: #AACCEE #D8DDE5 #D8DDE5; border-width: 3px 1px 1px; }
.cooltable th { background: #F3F7FF; color: #6774A8; border-bottom: 1px solid #AACCEE; padding: 5px 1px 5px 1px; font-weight: bold;}
.cooltable .th { background: #F3F7FF; color: #6774A8; border-bottom: 1px solid #AACCEE; padding: 5px 1px 5px 1px; font-weight: bold;}
.cooltable td { border: 1px solid #D8DDE5; padding: 3px 5px 3px 5px; font-family: Georgia, "Times New Roman", Times, serif; }
.cooltable tr.odd { background:FFFFFF;}
.cooltable tr.highlight { background:#F3F7FF;}
.cooltable tr.selected { background:#B3CBFF;}
</style>
<!-- demo2 -->
<table class="cooltable">
<thead>
<tr>
<th width="60"><input onclick="checkAllLine()" id="checkedAll" name="checkedAll" type="checkbox" /></th>
<th width="*">姓名</th>
<th width="60">性别</th>
<th width="100">暂住地</th>
<th width="120">操作</th>
</tr>
</thead>
<tbody>
<tr>
<td><input type="checkbox" name="tablechoice1" value="" /></td>
<td>无名</td>
<td>男</td>
<td>浙江宁波</td>
<td class="oper">删除</td>
</tr>
<tr>
<td><input type="checkbox" name="tablechoice1" value="" /></td>
<td>有姓</td>
<td>女</td>
<td>浙江杭州</td>
<td class="oper">删除</td>
</tr>
<tr>
<td><input type="checkbox" name="tablechoice1" value="" /></td>
<td>王二</td>
<td>男</td>
<td>湖南长沙</td>
<td class="oper">删除</td>
</tr>
<tr>
<td><input type="checkbox" name="tablechoice1" value="" /></td>
<td>找六</td>
<td>男</td>
<td>浙江温州</td>
<td class="oper">删除</td>
</tr>
<tr>
<td><input type="checkbox" name="tablechoice1" value="" /></td>
<td>Rain</td>
<td>男</td>
<td>浙江杭州</td>
<td class="oper">删除</td>
</tr>
<tr>
<td><input type="checkbox" name="tablechoice2" value="" /></td>
<td>MAXMAN</td>
<td>女</td>
<td>浙江杭州</td>
<td class="oper">删除</td>
</tr>
</tbody>
</table>
</html>
上诉代码用到了jQuery1.2.6，大家可以自行下载。
[责任编辑：jumbot]
