[Original] table cell staggered coloring

Document directory

• 3.1. CSS
• 3.2. JS Code

[Title] [original] table cell staggered coloring
[Date] 2013-04-01
[Abstract] The color is determined cyclically by changing the space time.
[Keywords] table, color, coloring, color, four colors, algorithm, jQuery, javascript
[Environment] jQuery
Author wintys (wintys@gmail.com) http://wintys.cnblogs.com
URL http://www.cnblogs.com/wintys/archive/2013/04/01/color_table_cell.html

 

[Content ]:

1. Effect

TR0-TD0	TR0-TD1	TR0-TD2	TR0-TD3
TR1-TD0	TR1-TD1	TR1-TD2	TR1-TD3
TR2-TD0	TR2-TD1	TR2-TD2	TR2-TD3
TR3-TD0	TR3-TD1	TR3-TD2	TR3-TD3

2. Problem Description

The cells in the following table are staggered. The HTML Tag and content in the table are set. <Div id = "tablecontainer" align = "center">
<Table style = "border-collapse: collapse;" cellspacing = "0">
<Tbody>
<Tr>
<Td> <a href = "http://www.yunyun.com/"> TR0-TD0 </a> </td>
<Td> <a href = "http://www.yunyun.com/"> TR0-TD1 </a> </td>
<Td> <a href = "http://www.yunyun.com/"> TR0-TD2 </a> </td>
<Td> <a href = "http://www.yunyun.com/"> TR0-TD3 </a> </td>
</Tr>
<Tr>
<Td> <a href = "http://www.yunyun.com/"> TR1-TD0 </a> </td>
<Td> <a href = "http://www.yunyun.com/"> TR1-TD1 </a> </td>
<Td> <a href = "http://www.yunyun.com/"> TR1-TD2 </a> </td>
<Td> <a href = "http://www.yunyun.com/"> TR1-TD3 </a> </td>
</Tr>
<Tr>
<Td> <a href = "http://www.yunyun.com/"> TR2-TD0 </a> </td>
<Td> <a href = "http://www.yunyun.com/"> TR2-TD1 </a> </td>
<Td> <a href = "http://www.yunyun.com/"> TR2-TD2 </a> </td>
<Td> <a href = "http://www.yunyun.com/"> TR2-TD3 </a> </td>
</Tr>
<Tr>
<Td> <a href = "http://www.yunyun.com/"> TR3-TD0 </a> </td>
<Td> <a href = "http://www.yunyun.com/"> TR3-TD1 </a> </td>
<Td> <a href = "http://www.yunyun.com/"> TR3-TD2 </a> </td>
<Td> <a href = "http://www.yunyun.com/"> TR3-TD3 </a> </td>
</Tr>
</Tbody>
</Table>
</Div> 3. Implement 3.1 and CSS <style type = "text/css">
. Tableitem0 {
Background: none repeat scroll 0 0 # F65314;
Color: # FFFFFF;
}
. Tableitem1 {
Background: none repeat scroll 0 0 #7CBB00;
Color: # FFFFFF;
}
. Tableitem2 {
Background: none repeat scroll 0 0 #00A1F1;
Color: # FFFFFF;
}
. Tableitem3 {
Background: none repeat scroll 0 0 # FFBB00;
Color: # FFFFFF;
}
# Tablecontainer td {
Padding: 5px;
}
. Tableitem {
Width: 15%;
}
. Tableitem {
Display: block;
Font-size: 18px;
Height: 35px;
Margin: 0 auto;
Padding: 15px 20px;
Text-align: center;
Border-bottom: none;
}
. Tableitem a: hover,. tableitem a: visited {
Color: # FFFFFF! Important;
}
. Tableitem a: hover,. tableitem a: active {
Opacity: 0.8;
}
</Style> 3.2. JS Code

<Script type = "text/javascript">
Function setTableStyle (){
$ ("# Tablecontainer tr"). each (function (I) {// obtain all tr, perform each loop traversal, and perform each operation
Var tr = $ (this); // get the tr in this loop
SetTableItemStyle (tr,I % 4); // Four cells in each row and four colors are cyclically colored.
});
}
Function setTableItemStyle (tr, base ){
// [Key]: Change the space for time and determine the color in cycles.
Var tableitem = ["tableitem0", "tableitem1", "tableitem2", "tableitem3", "tableitem0", "tableitem1", "tableitem2"];
For (var I = 0; I <4; I ++ ){
Var td = tr. children ("td"). eq (I );
Var td_a = td. find ("");

Td. addClass ("tableitem ");
// [Key]: base determines the start color, and I determines the cells to be colored this time.
Td_a.addClass (Tableitem [base + I]);
}
}
$ (Function (){
SetTableStyle ();
});
</Script>