Home > Developer > Web Develop
Examples of interlaced color codes implemented by jquery:
Interlaced color effect in a large number of Web applications, especially tables or news lists and other structures, can effectively enhance the site's identification, more humane, the following through a simple example of its implementation principle, as to its aesthetics here is not fastidious, code examples are as follows:
<!DOCTYPE HTML><HTML><Head><MetaCharSet= "Utf-8"><Metaname= "Author"content= "http://www.51texiao.cn/" /><title>Ant Tribe</title><styletype= "Text/css">Table{width:300px;}caption{background:#DCA;}th{background:#FCA;width:50%;}TD{text-align:Center;}</style><Scripttype= "Text/javascript"src= "Mytest/jquery/jquery-1.8.3.js"></Script><Scripttype= "Text/javascript">$ (document). Ready (function() {Odd= {"background":"#EDA","Color":"#3F5"}; Even={"background":"#2DA","Color":"#875"}; Odd_even ("#table_test", Odd,even); }); functionOdd_even (Id,odd,even) {$ (id). FIND ("TR"). each (function(index,element) {if(Index%2==1){ $( This). css (odd); } Else{ $( This). css (even); } })} </Script></Head><Body><TableID= "Table_test"> <caption>Table title</caption> <TR> <th>Site name</th> <th>Site location</th> </TR> <TR> <TD>Ant Tribe</TD> <TD>South of Qingdao City</TD> </TR> <TR> <TD>Ant Tribe</TD> <TD>South of Qingdao City</TD> </TR> <TR> <TD>Ant Tribe</TD> <TD>South of Qingdao City</TD> </TR> <TR> <TD>Ant Tribe</TD> <TD>South of Qingdao City</TD> </TR> <TR> <TD>Ant Tribe</TD> <TD>South of Qingdao City</TD> </TR> <TR> <TD>Ant Tribe</TD> <TD>South of Qingdao City</TD> </TR> <TR> <TD>Ant Tribe</TD> <TD>South of Qingdao City</TD> </TR> <TR> <TD>Ant Tribe</TD> <TD>South of Qingdao City</TD> </TR></Table></Body></HTML>
The above code realizes the interlaced effect we want, the following is a brief introduction of its implementation process.
I. Principle of implementation:
The principle is very simple, through each () to facilitate each row, and then through the index values to determine the parity rows, and then to each of them set a different background color.
Two. Code comments:
1.$. Ready (function () {}, when the document structure is fully loaded and then executes the code in the function.
2.odd={"Background": "#EDA", "Color": "#3F5"} and even={"background": "#2DA", "Color": "#875"}, creating two JSON-formatted objects, Used to set the background color of odd and even rows.
3.odd_even ("#table_test", Odd,even), invokes the function and passes the arguments.
4.function Odd_even (Id,odd,even) {}, create a function that passes 3 parameters, the first one to set the ID of the interlaced table, and the second and third are the background colors of the odd and even rows respectively.
5.$ (ID). FIND ("tr"). each (function (index,element) {}, gets the TR and traverses through each function.
6.if (index%2==1), if the index and 2 are redundant, if the remainder is 1, then the specified background color is set, otherwise the other background color is set. It is important to note that the index value is zero-based, so the index is an even line when it is odd.
The original address is: http://www.51texiao.cn/jqueryjiaocheng/2015/0613/4044.html
The original address is: http://www.softwhy.com/forum.php?mod=viewthread&tid=8324
Examples of interlaced color codes implemented by jquery
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
