jQuery實(shí)現(xiàn)表格顏色的交替顯示

2024-09-05 12:20:43

字體：大中小

供稿：網(wǎng)友

jQuery實(shí)現(xiàn)表格顏色的交替顯示，再此請(qǐng)注意：如果初次打開(kāi)右下角提示有錯(cuò)誤的話，請(qǐng)重新刷新一下網(wǎng)頁(yè)即可，其實(shí)隔行換色不用這么復(fù)雜，不過(guò)每個(gè)人要求換色的形式不同，因此本款僅供參考。

<!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><title>jQuery實(shí)現(xiàn)表格顏色的交替顯示</title><script type="text/javascript" src="/ajaxjs/jquery1.3.2.js"></script><script type="text/javascript">jQuery(document).ready(function(){  jQuery(".truecolor tr:odd").addClass("color1");  jQuery(".truecolor tr:even").addClass("color2");  jQuery(".truecolor tr").hover(function(){    jQuery(this).addClass("color3")  },function(){    jQuery(this).removeClass("color3")  });});</script><style type="text/css">.truecolor {border:1px solid #333;text-align:center;}.truecolor th {background-color:#333; color:#FFF;}.color1 {background-color:#DDD; color:#333;}.color2 {background-color:#EEE; color:#333;}.color3 {background-color:#666; color:#FFF;}</style></head><body><table width="450" class="truecolor">  <thead>    <tr>      <th>博客</th>      <th>作者</th>      <th>網(wǎng)址</th>    </tr>  </thead>  <tbody>    <tr>      <td>風(fēng)格之舞</td>      <td>火德</td>      <td>隔行換色</td>    </tr>    <tr>      <td>趙雷的博客</td>      <td>趙雷</td>      <td>新浪微博</td>    </tr>    <tr>      <td>寂寞廣場(chǎng)</td>      <td>魏春亮</td>      <td>同學(xué)錄</td>    </tr>    <tr>      <td>淘寶UED</td>      <td>淘寶</td>      <td>經(jīng)常購(gòu)物</td>    </tr>  </tbody></table></body></html>

上一篇：兼容性好，自動(dòng)置頂?shù)奶詫殤腋」ぞ邫?/a>

下一篇：jQuery 連綴寫法折疊菜單代碼