我需要你的帮助,
我如何使用jQuery,
更改表中所选行的背景颜色(本例中,让我们使用css类“突出显示”
如果再次点击同一行,请将其更改为默认颜色(白色),选择css类“nonhighlighted”
- <!DOCTYPE html>
- <html>
- <head>
- <style type="text/css">
- .highlighted {
- background: red;
- }
- .nonhighlighted {
- background: white;
- }
- </style>
- </head>
- <body>
- <table id="data" border="1" cellspacing="1" width="500" id="table1">
- <tr>
- <td> </td>
- <td> </td>
- <td> </td>
- <td> </td>
- </tr>
- <tr>
- <td> </td>
- <td> </td>
- <td> </td>
- <td> </td>
- </tr>
- <tr>
- <td> </td>
- <td> </td>
- <td> </td>
- <td> </td>
- </tr>
- <tr>
- <td> </td>
- <td> </td>
- <td> </td>
- <td> </td>
- </tr>
- </table>
- </body>
- </html>
解决方法
- .highlight { background-color: red; }
如果你想要多个选择
- $("#data tr").click(function() {
- $(this).toggleClass("highlight");
- });
如果您只想一次选择表中的1行
- $("#data tr").click(function() {
- var selected = $(this).hasClass("highlight");
- $("#data tr").removeClass("highlight");
- if(!selected)
- $(this).addClass("highlight");
- });
