Use jQuery5 minutes to quickly get a simple example of a two-color table, jquery5 table

Use jQuery5 minutes to quickly get a simple example of a two-color table, jquery5 table

First, let's take a look at the effect of the two-color table created using jQuery:

This dual-color table seems very professional, but it is really easy to implement with jQuery.

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 * {padding: 6px 11px;} tr. alt td {background: # ecf6fc;/* Add 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 class value to alt $ (". stripe tr: even "). addClass ("alt"); $ (". stripe tr "). mouseover (function () {// if you move the cursor over the tr of a 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 $ (this) when the mouse clicks this row ). 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"> 
The preceding simple example of using jQuery5 minutes to quickly get a two-color table is all the content shared by Alibaba Cloud xiaobian. I hope you can give us a reference and support our customer service.