Use jQuery5 minutes to quickly handle a simple example of a two-color table _jquery

Let's take a look at the effect of this Two-color table using jquery:

This two-color form should look professional, but it's really simple to do with jquery.

The first step: write good 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 * { 
  padding:6px 11px; 
} 
Tr.alt td { 
  background: #ecf6fc;/* This line will give all TR plus background color */ 
} 
 
tr.over td { 
  background: #bcd4ec; * This will be the background color of mouse Gaoliang * * 
</style>

Step Two: write the jquery page Load event:

<script type= "Text/javascript" > 
	$ (function () {
			/) Add a class value of Alt 
	  $ (". Stripe tr" to the even rows of tables with class stripe) : even "). AddClass (" alt "); 
			$ (". Stripe tr"). MouseOver (function () {//If the mouse moves over the TR of a table with class stripe, execute the 
    $ (this). addclass ("over"); Mouseout (The function () {//Adds a class value to this row, and executes the function $ (this) when the mouse is on the line
     . Removeclass ("over");
   })
	; 

The above mouse hover event takes the chain operation of jquery, which should have been written as follows:

$ (". Stripe tr"). MouseOver (function () { 
  $ (this). addclass (' over ');}) 
$ (". Stripe tr"). Mouseout (function () { 
  $ (this). Removeclass (' over ');})

But the code above is written like this:

$ (". Stripe tr"). MouseOver (function () { 
    $ (this). addclass (' over ');}). Mouseout (function () { 
     $ (this). Removeclass (' over ');})

In jquery, after executing mouseover or mouseout, it returns the current action object, so you can use the jquery chain operation.

Paste the complete JSP code below myjsp.jsp:

<%@ 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" >  

Above the use of jQuery5 minutes to quickly handle the two-color table Simple example is a small series to share all the content, hope to give you a reference, but also hope that we support the cloud-dwelling community.