Home > Developer > JavaScript
First, let's take a look at the effect of the two-color table created using jQuery:
This two-color table should be very professional for those who are new to creating web pages, but it is indeed very simple.
Step 1: Write css.
<Style type = "text/css">
Th {/* Header style */
Background: # 0066FF;
Color: # FFFFFF;
Line-height: 20px;
Height: 30px;
}
Td {
Padding: 6px 11px;
Border-bottom: 1px solid #95bce2;
Vertical-align: top;
Text-align: center;
}
Td * {www.2cto.com
Padding: 6px 11px;
}
Tr. alt td {
Background: # ecf6fc;/* This line adds the background color to all tr */
}
Tr. over td {
Background: # bcd4ec;/* this will be the background color of the highlighted line of the mouse */
}
</Style>
Step 2: Write the jQuery page loading event:
<Script type = "text/javascript">
$ (Function (){
// Add the value of class to the even row of the table whose class is stripe as alt
$ (". Stripe tr: even"). addClass ("alt ");
$ (". Stripe tr"). mouseover (function () {// if you move the cursor over the tr of the table whose class is stripe, run the function
$ (This). addClass ("over") ;}). mouseout (function () {// Add the class value to the row as over, and execute the function when the mouse clicks this row
$ (This). removeClass ("over ");
})
});
</Script>
The above mouse suspension event uses jQuery's chained operation, which should have been written as follows:
$ (". Stripe tr"). mouseover (function (){
$ (This). addClass ("over ");})
$ (". Stripe tr"). mouseout (function (){
$ (This). removeClass ("over ");})
However, the above Code is written as follows:
$ (". Stripe tr"). mouseover (function (){
$ (This). addClass ("over") ;}). mouseout (function (){
$ (This). removeClass ("over ");})
In jQuery, after executing the mouseover or mouseout method, it will return the current operation object, so you can use jQuery's chained operation.
Paste the complete jsp code MyJsp. jsp below:
<% @ Page language = "java" import = "java. util. *" pageEncoding = "UTF-8" %>
<%
String path = request. getContextPath ();
String basePath = request. getScheme () + ": //" + request. getServerName () + ":" + request. getServerPort () + path + "/";
%>
<! Doctype html public "-// W3C // dtd html 4.01 Transitional // EN">
<Html>
<Head>
<Base href = "<% = basePath %>">
<Title> jQuery takes several minutes to complete a two-color table </title>
<Script type = "text/javascript" src = "mybag/jquery-1.4.2.min.js"> </script>
<Script type = "text/javascript">
$ (Function (){
// Add the value of class to the even row of the table whose class is stripe as alt
$ (". Stripe tr: even"). addClass ("alt ");
$ (". Stripe tr"). mouseover (function () {// if you move the cursor over the tr of the table whose class is stripe, run the function
$ (This). addClass ("over") ;}). mouseout (function () {// Add the class value to the row as over, and execute the function when the mouse clicks this row
$ (This). removeClass ("over ");
})
});
</Script>
<Style type = "text/css">
Th {
Background: # 0066FF;
Color: # FFFFFF;
Line-height: 20px;
Height: 30px;
}
Td {
Padding: 6px 11px;
Border-bottom: 1px solid #95bce2;
Vertical-align: top;
Text-align: center;
}
Td *{
Padding: 6px 11px;
}
Tr. alt td {
Background: # ecf6fc;/* This line adds the background color to all tr */
}
Tr. over td {
Background: # bcd4ec;/* this will be the background color of the highlighted line of the mouse */
}
</Style>
</Head>
<Body>
<! -- Use class = "stripe" to identify the table to use this effect -->
<Table class = "stripe" width = "50%" border = "0" cellspacing = "0" cellpadding = "0">
<Thead>
<Tr>
<Th> name </th>
<Th> age </th>
<Th> QQ </th>
<Th> Email </th>
</Tr>
</Thead>
<Tbody>
<Tr>
<Td> Li Xiaohong </td>
<Td> 24 </td>
<Td> 859855 **** </td>
<Td> 859855 *** @ qq.com </td>
</Tr>
<Tr>
<Td> yuntianhe </td>
<Td> 18 </td>
<Td> 123456789 </td>
<Td> 123456789@qq.com </td>
</Tr>
<Tr>
<Td> Liu mengyu </td>
<Td> 18 </td>
<Td> 987654321 </td>
<Td> 987654321@qq.com </td>
</Tr>
<Tr>
<Td> Han lingsha </td>
<Td> 18 </td>
<Td> 888888888 </td>
<Td> 888888888@qq.com </td>
</Tr>
<Tr>
<Td> Xuan Xiao </td>
<Td> 58 </td>
<Td> 123456 </td>
<Td> 123456@qq.com </td>
</Tr>
<Tr>
<Td> tulingzhu </td>
<Td> 1000 </td>
& Lt; td & gt;-10000 & lt;/td & gt;
<Td>-10000@qq.com </td>
</Tr>
</Tbody>
</Table>
<P> how is it? JQuery is so awesome. </p>
</Body>
</Html>
From tjcyjd's column
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
