<!DOCTYPE html><html lang="zh-cn"><head> <meta charset="utf-8"> <title></title> <style>
table{ border:1px solid #000; width: 400px; text-align: center; border-collapse: collapse; } thead tr{ border: 1px solid #000; } .selected{ background:red; } </style></head><body> <table> <thead> <tr> <th></th> <th>姓名</th> <th>性别</th> <th>暂住地</th> </tr> </thead> <tbody> <tr><td><input id="d1" type="checkbox"/></td><td>张山1</td><td>男</td><td>浙江宁波</td></tr> <tr><td><input id="d2" type="checkbox"/></td><td>张山2</td><td>男</td><td>浙江宁波</td></tr> <tr><td><input id="d3" type="checkbox"/></td><td>张山3</td><td>男</td><td>浙江宁波</td></tr> <tr><td><input id="d4" type="checkbox"/></td><td>张山4</td><td>男</td><td>浙江宁波</td></tr> <tr><td><input id="d5" type="checkbox"/></td><td>张山5</td><td>男</td><td>浙江宁波</td></tr> <tr><td><input id="d6" type="checkbox"/></td><td>张山6</td><td>男</td><td>浙江宁波</td></tr> </tbody> </table></body><script src="js/jquery-1.11.3.js"></script><script> //jquery有一些弊病，checked这样的是没有属性值的，不能用attr("checked",true) $(function(){ $(‘tbody>tr‘).click(function(){ var $thisonly=$(this); if($thisonly.hasClass(‘selected‘)){ $thisonly.removeClass(‘selected‘); $thisonly.find(‘:checkbox‘)[0].checked=false; }else{ $thisonly.addClass(‘selected‘).siblings().removeClass(‘selected‘); $thisonly.find(‘:checkbox‘)[0].checked=true; $(‘table :checkbox:checked‘).parent().parent().addClass(‘selected‘); } } ) })</script></html>
时间： 2024-11-10 07:06:55