Here is a description of the form of alternate colors of the method, we first to introduce the method of jquery, and then a simple introduction to the implementation of JS method.
| The code is as follows |
Copy Code |
| <script type= "Text/javascript" >
$ (document). Ready (function () {
$ (". Table tr"). MouseOver (function () {//If the mouse moves over the TR of a table with class table, execute functions
$ (this). addclass ("hover"); Mouseout (function () {//) adds a class value to this row hover and executes functions when the mouse is out
$ (this). Removeclass ("hover");}) Remove class for this line
$ (". Table Tr:even"). AddClass ("even"); Add the class value to Alt for the even row of a table with class
});
</script>
HTML code HTML code
<table class= "table" border= "0" cellpadding= "0" cellspacing= "0" width= "50%" >
<!--use class= "table" to identify the table you want to use this effect-->
<thead>
<tr>
<th> name </th>
<th> Age </th>
<th>MSN</th>
<th>Email</th>
</tr>
</thead>
<tr>
<td>Owen</td>
<td>30</td>
<td>owen.net@hotmail.com</td>
<td><a href= "/css/" >css</a></td>
</tr>
<tr>
<td>Owen</td>
<td>30</td>
<td>owen.net@hotmail.com</td>
<td><a href= "/css/" >css</a></td>
</tr>
<tr>
<td>Owen</td>
<td>30</td>
<td>owen.net@hotmail.com</td>
<td><a href= "/css/" >css</a></td>
</tr>
<tr>
<td>Owen</td>
<td>30</td>
<td>owen.net@hotmail.com</td>
<td><a href= "/css/" >css</a></td>
</tr>
<tr>
<td>Owen</td>
<td>30</td>
<td>owen.net@hotmail.com</td>
<td><a href= "/css/" >css</a></td>
</tr>
<tr>
<td>Owen</td>
<td>30</td>
<td>owen.net@hotmail.com</td>
<td><a href= "/css/" >css</a></td>
</tr>
</table> |
JS method, using class to find elements
| The code is as follows |
Copy Code |
| /**
* Get elements based on sign signature and class name
* @param tagName Signature
* @param elementclassname Element class name
* @return Sign signature and an array of elements with the given parameter as the class name
*/
function Getelementsbytagnameandclassname (tagname,elementclassname) { var array=new array ();
var elements=document.getelementsbytagname (tagName);
for (Var i=0;i<elements.length;i++) {
if (elements[i].classname==elementclassname) {
Array.push (Elements[i]);
}
}
return array;
} /**
* Table alternate color, specify the mouse to move to the background color of the current row, remove the background color of the current row
* @param the class attribute name of the ClassName table
* @param oddbackgroundcolor table odd Row background color
* @param evenbackgroundcolor table even row background color
* @param Mouseoverbackgroundcolor mouse to the background color of the current line
*/
function Tablerowbackgroundcolor (classname,oddbackgroundcolor,evenbackgroundcolor,mouseoverbackgroundcolor) {
var tables=getelementsbytagnameandclassname ("table", className);
for (Var i=0;i<tables.length;i++) {
var rows=tables[i].rows;
var roworiginalcolor= "";
for (Var j=1;j<rows.length;j++) {
Rows[j].style.backgroundcolor = j%2==0? Oddbackgroundcolor:evenbackgroundcolor;
The mouse moves to the current line, specifying the background color of the current row.
Rows[j].onmouseover=function () {
Roworiginalcolor=this.style.backgroundcolor;
This.style.backgroundcolor=mouseoverbackgroundcolor
}
The mouse moves out of the current line, specifying that the background color of the current row is the original color of the row.
Rows[j].onmouseout=function () {
This.style.backgroundcolor=roworiginalcolor;
}
}
}
} |
