<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>form</title> <mce:style><!-- .even{ background:#CCC; } .odd{ background:#999; } .selected{ background:#0F9; } --></mce:style><style mce_bogus="1">.even{ background:#CCC; } .odd{ background:#999; } .selected{ background:#0F9; }</style> <mce:script src="jquery-1.3.2.js" mce_src="jquery-1.3.2.js"></mce:script> <mce:script type="text/javascript"><!-- $(document).ready(function(){ $("tbody>tr:even").addClass("even"); $("tbody>tr:odd").addClass("odd"); $("tr:contains('王五')").addClass("selected"); /*$("tbody>tr").click(function(){ $(this).addClass("selected").siblings().removeClass("selected").end().find(":radio").attr("checked",true); });*/ $("tbody>tr").click(function(){ /*if($(this).hasClass('selected')){ $(this).removeClass('selected').find(':checkbox').attr("checked",false); }else{ $(this).addClass('selected').find(':checkbox').attr('checked',true); }*/ var hasSelected = $(this).hasClass('selected'); $(this)[hasSelected?"removeClass":"addClass"]('selected').find(':checkbox').attr('checked',!hasSelected); }); //$("tbody>tr:has(:checked)").addClass('selected'); }); // --></mce:script> </head> <body> <table style="border:1px solid red" mce_style="border:1px solid red"> <thead> <tr><th></th><th>姓名</th><th>性别</th><th>暂住地</th></tr> </thead> <tbody> <tr><td><input type="checkbox" /></td><td>张山</td><td>男</td><td>浙江宁波</td></tr> <tr><td><input type="checkbox" /></td><td>李四</td><td>女</td><td>浙江</td></tr> <tr><td><input type="checkbox" /></td><td>王五</td><td>男</td><td>浙江杭州</td></tr> <tr><td><input type="checkbox" /></td><td>张山</td><td>男</td><td>浙江温州</td></tr> <tr><td><input type="checkbox" /></td><td>Rain</td><td>男</td><td>浙江</td></tr> <tr><td><input type="checkbox" /></td><td>MAX</td><td>男</td><td>浙江宁波</td></tr> </tbody> </table> </body> </html>