jQuery實作簡單隔行變色的方法_jquery-js教程-PHP中文網

首頁

web前端

js教程

jQuery實作簡單隔行變色的方法_jquery

May 16, 2016 pm 03:14 PM

jquery

本文實例講述了jQuery實作簡單隔行變色的方法。分享給大家參考，具體如下：

&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;
&lt;html xmlns="http://www.w3.org/1999/xhtml"&gt;
&lt;head&gt;
&lt;meta http-equiv="Content-Type" content="text/html; charset=gb2312" /&gt;
&lt;title&gt;jquery 奇偶变色&lt;/title&gt;
&lt;script type="text/javascript" src="jquery-1.3.2.min.js"&gt;&lt;/script&gt;
&lt;script&gt;
$(document).ready(function() {
$("#hacker").find("tr").addClass("odd");
$("#hacker").find("tr:even").addClass("even");
// $("tr").addClass("odd");
//$("tr:even").addClass("even"); //奇偶变色，添加样式
//$("#hacker tr").addClass("odd");
//$("#hacker tr:even").addClass("even");
});
&lt;/script&gt;
&lt;style&gt;
#hacker tr:hover{background-color:red;}
.odd {background-color: #fff; /* pale yellow for odd rows */}
.even {background-color: #000; /* pale blue for even rows */}
&lt;/style&gt;
&lt;/head&gt;
&lt;body&gt;
&lt;table id="hacker"&gt;
&lt;tr&gt;
&lt;td&gt;As You Like It&lt;/td&gt;
&lt;td&gt;Comedy&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;All's Well that Ends Well&lt;/td&gt;
&lt;td&gt;Comedy&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;Hamlet&lt;/td&gt;
&lt;td&gt;Tragedy&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;Macbeth&lt;/td&gt;
&lt;td&gt;Tragedy&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;Romeo and Juliet&lt;/td&gt;
&lt;td&gt;Tragedy&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;Henry IV, Part I&lt;/td&gt;
&lt;td&gt;History&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;Henry V&lt;/td&gt;
&lt;td&gt;History&lt;/td&gt;
&lt;/tr&gt;
&lt;/table&gt;
&lt;/body&gt;
&lt;/html&gt;

登入後複製

更多關於jQuery相關內容有興趣的讀者可查看本站專題：《jQuery拖曳特效與技巧總結》、《jQuery常見經典特效匯總》、《 jQuery擴充技巧摘要》、《jquery選擇器用法摘要》及《jquery常用操作技巧總結》

希望本文所述對大家jQuery程式設計有所幫助。

本網站聲明

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn