"JQuery Basic Learning" in jquery table operations and Cookie plugin usage

Source: Internet
Author: User

This chapter was intended to be written as a form action and table operation for jquery.

Yesterday, however, jquery's form operation was finished, and all the leftovers from the previous chapters were found, so it was not written.

So let's take a look at the form today.

Because it is usually done in the company's internal management system, so that the data table used to be more. Well, maybe you can use it if you write it here.

Application of the table on jquery

  • Interlaced color
    $ (function () {  $ ("tbody>tr:odd"). AddClass (" style 1  "); // odd is to select odd rows  $ ("tbody>tr:even"). AddClass (" style 2"); // even is select even line })
  • Single marquee control table row highlighting
    $('tbody>tr'). Click (function () {$ ( This). AddClass ('Check Style'). Siblings (). Removeclass ('Check Style'). End (). Find (': Radio'). attr ('checked',true);//notice here that end (), when siblings () is used, all the elements behind it actually manipulate the statistical element of this, and end () returns to the previous $ (this) element.});//Notice that when we first initialize the table, if the default Radio box is selected, it needs to be processed. $ (Table:radio:checked). Parent (). Parent (). AddClass ('selected');//or$ (Table:radio:checked). Parents ("TR"). AddClass ('selected');//or$ (Table>tr:has (:checked). AddClass ('selected');
  • check box controls the table row highlighting
     //  The simplest kind of thing is not written, look at the following   $ (' tbody>tr '). Click (function   () {  //  Determines whether  var  hasselected=$ (); $ ( this ) [hasselected?] Removeclass ":" AddClass "] (' selected '  ': CheckBox '). attr (" Checked ",!< Span style= "color: #000000;" >hasselected);  //  This example highlights [hasselected?] Removeclass ":" AddClass "] this play  //  This is actually the use of JavaScript, because something inside an object can be used in both. This form is removed, and can be taken out in an array-like form  
  • table Expand Close
     //  $ (function   () {$ ( ' tr. Parent '). Click (function   () {$ ( this ). Toggleclass ("Selected" ). Siblings ( '. Child_ ' +
  • Table Content Filtering
    // The following is the filter action for the table $ (function() {    $ ("#filterName"). KeyUp (function() {        $ ( "Table tbody tr"). Hide ()            . Filter (": Contains ('" + ($ (this). Val ()) + "')"). Show ();    });}) ; // This is generally not used, because we want the table is usually the page, and then go to the background to check the filter, and then pass the data to the foreground. 

Well, the rest of this chapter is fried leftovers, the only new function is

var $div _li=$ ("Li"), $div _li.click (function() {    var index= $div _ Li.index (this); // This usage is interesting, followed by the index function, which is used in the selected element and then gets the index of the element according to the element})

There is JS can manipulate the entire stylesheet replacement (this I did not play before)

<link href= "Css/skin_0.css" rel= "stylesheet" type= "Text/css" id= "Cssfile"/>$ (function() {   $ ("#cssfile"). attr ("href", "css/skin_1.css");})

It also introduces a small plug-in that operates cookies in jquery that can help simplify cookie operations

<script src= "Js/jquery.cookie.js" type= "Text/javascript" ></script>$.cookie ("Mycssskin", "232 ", {path: '/', expires:10}); // Save Cookies //  // path : '/' must be written, otherwise the path of the cookie will be set automatically according to the directory path, as Http://www.xxx.com/user/,path will be set to '/user '  var cookie_skin=$.cookie ("Mycssskin"); // Take Cookies

"JQuery Basic Learning" in jquery table operations and Cookie plugin usage

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.