前幾天就遇到過這樣的問題,明明我用的是('tr :even').css('background','#ccc')想改變表格中行的背景色,反復試了還是沒改變。還問了度娘還是沒找到原因所在(當時問題描述的方向錯了)。今天再次遇到了這個問題,原來是我習慣性地把空格給加上了。
加了空格的效果是這樣的:
去掉空格后得到了想要的樣子:
以上兩種結果可以看出,加了空格后選中的是其子元素,沒加空格的才是指向它自身(暫時只在帶冒號':'的選擇器中遇到這個問題),一定要注意空格的問題,注意養成良好的編程習慣。
以下是代碼:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>表格變色</title> <style type="text/css"> tr{ margin-left: 10px; } td{ width: 100px; } table th { border-width: 1px; padding: 8px; border-style: solid; border-color: #a9c6c9; } table td { text-align: center; border-width: 1px; padding: 8px; border-style: solid; border-color: #a9c6c9; } </style> <script type="text/javascript" src="../jquery/jquery.min.js"></script> <script type="text/javascript"> $(function(){ $('tr:even').css('background', '#F6E2E2'); }); </script> </head> <body> <table style="border:1px solid #000;padding: 5px;"> <thead style="border-bottom:2px solid #000;margin-left: 4px; "> <tr><th>姓名</th><th>性別</th><th>暫住地</th></tr> </thead> <tbody> <tr> <td>張三</td> <td>男</td> <td>浙江寧波</td> </tr> <tr> <td>李四</td> <td>女</td> <td>浙江杭州</td> </tr> <tr> <td>王五</td> <td>男</td> <td>湖南長沙</td> </tr> <tr> <td>趙六</td> <td>男</td> <td>浙江溫州</td> </tr> <tr> <td>Rain</td> <td>男</td> <td>浙江杭州</td> </tr> <tr> <td>Maxman</td> <td>女</td> <td>浙江杭州</td> </tr> </tbody> </table> </body> </html>