1 <html xmlns="http://www.w3.org/1999/xhtml"> 2 <head runat="server"> 3 <title></title> 4 <style type="text/css"> 5 table 6 { 7 width: 300px; 8 } 9 10 table, th, tr, td 11 { 12 border: 1px solid black; 13 border-collapse: collapse; 14 padding: 3px; 15 } 16 17 td 18 { 19 vertical-align: middle; 20 text-align: center; 21 } 22 23 .even 24 { 25 background: #fff38f; 26 } 27 .odd 28 { 29 background: #ffffee; 30 } 31 .selected 32 { 33 background: lightgreen; 34 } 35 </style> 36 <script src="Scripts/jquery-1.4.1.min.js" type="text/javascript"></script> 37 <script type="text/javascript"> 38 39 $(function () { 40 $("tbody>tr:odd").addClass("odd"); /*给奇数行添加样式*/ 41 $("tbody>tr:even").addClass("even"); /*给偶数行添加样式*/ 42 43 //将某一行加高亮 44 //$("tr:contains('刘虹')").addClass("selected"); 45 46 //选中某行加高亮 47 $("tbody>tr").click(function () { 48 $(this).addClass("selected") 49 .siblings().removeClass("selected") //去掉兄弟行的样式 50 .end() //返回到当前对象 51 .find(":radio").attr("checked", true) 52 .parent().parent() 53 .siblings().find(":radio").attr("checked", false); 54 55 }); 56 57 }); 58 59 60 </script> 61 </head> 62 <body> 63 <form id="form1" runat="server"> 64 <div> 65 <table> 66 <thead> 67 <tr> 68 <th> 69 </th> 70 <th> 71 姓名 72 </th> 73 <th> 74 性别 75 </th> 76 <th> 77 暂住地 78 </th> 79 </tr> 80 </thead> 81 <tbody> 82 <tr> 83 <td> 84 <input type="radio" /> 85 </td> 86 <td> 87 何龙龙 88 </td> 89 <td> 90 男 91 </td> 92 <td> 93 苏州 94 </td> 95 </tr> 96 <tr> 97 <td> 98 <input type="radio" /> 99 </td> 100 <td> 101 王龙 102 </td> 103 <td> 104 男 105 </td> 106 <td> 107 南京 108 </td> 109 </tr> 110 <tr> 111 <td> 112 <input type="radio" /> 113 </td> 114 <td> 115 刘虹 116 </td> 117 <td> 118 女 119 </td> 120 <td> 121 天津 122 </td> 123 </tr> 124 <tr> 125 <td> 126 <input type="radio" /> 127 </td> 128 <td> 129 张晓丹 130 </td> 131 <td> 132 女 133 </td> 134 <td> 135 圣地亚哥 136 </td> 137 </tr> 138 <tr> 139 <td> 140 <input type="radio" /> 141 </td> 142 <td> 143 Dannis 144 </td> 145 <td> 146 女 147 </td> 148 <td> 149 Washionton 150 </td> 151 </tr> 152 <tr> 153 <td> 154 <input type="radio" /> 155 </td> 156 <td> 157 何以琛 158 </td> 159 <td> 160 男 161 </td> 162 <td> 163 大阪 164 </td> 165 </tr> 166 </tbody> 167 </table> 168 </div> 169 </form> 170 </body> 171 </html>
效果图：