jQuery表格单选
<!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>jquery表格修饰：隔行换色,点击变色,多选单选变色</title> </head><script language=javascript src="http://code.jquery.com/jquery-1.4.2.min.js"></script> <style> </style> <SCRIPT LANGUAGE="JavaScript"> <!-- /* jQuery实现点击复选框即高亮显示选中行 全选、反选 详见http://www.cnblogs.com/chengulv/archive/2012/02/25/2368055.html */ (function ($) { $.fn.extend({ "alterBgColor": function (options) { var prevselitem = null; //设置默认值 options = $.extend({ // style: "0", odd: "odd", /* 偶数行样式*/ even: "even", /* 奇数行样式*/ over: "over", /* 鼠标掠过*/ selected: "selected" /* 选中行样式*/ }, options); //样式4 //其他列 为单选 $('tbody>tr td:not(:first-child)', this).click(function () { var p = $(this).parents("tr"); p.addClass(options.selected).siblings().removeClass(options.selected).find(':checkbox:first').attr('checked', false); p.find(':checkbox:first').attr('checked', true); }); } }); })(jQuery); $(document).ready(function () { $(':checkbox[name=tablechoice]').each(function(){ $(this).click(function(){ if($(this).attr('checked')){ $(':checkbox[name=tablechoice]').removeAttr('checked'); $(this).attr('checked','checked'); } }); }); $("#listTable").alterBgColor(); //可以链式操作 }); //--> </SCRIPT> </head> <body> <h1>Demo2--隔行,滑动,点击 变色.+ 多选框选中的行 变色.</h1> <table id='listTable'> <thead> <tr> <th></th> <th>姓名</th> <th>性别</th> <th>暂住地</th> </tr> </thead> <tbody> <tr> <td><input type="checkbox" name="tablechoice" value="" /></td> <td>张山</td> <td>男</td> <td>浙江宁波</td> </tr> <tr> <td><input type="checkbox" name="tablechoice" value="" /></td> <td>李四</td> <td>女</td> <td>浙江杭州</td> </tr> <tr> <td><input type="checkbox" name="tablechoice" value="" checked/></td> <td>王五</td> <td>男</td> <td>湖南长沙</td> </tr> <tr> <td><input type="checkbox" name="tablechoice" value="" /></td> <td>找六</td> <td>男</td> <td>浙江温州</td> </tr> <tr> <td><input type="checkbox" name="tablechoice" value="" /></td> <td>Rain</td> <td>男</td> <td>浙江杭州</td> </tr> <tr> <td><input type="checkbox" name="tablechoice" value="" /></td> <td>MAXMAN</td> <td>女</td> <td>浙江杭州</td> </tr> </tbody> </table> </body> </html>