Detailed jquery simple table application _jquery

General Introduction

Before the CSS technology, the layout of the Web page is basically based on the form, when the CSS, the table was abandoned by many designers, but the table also has his use, such as the list of data, the following table in a few common applications to deepen the understanding of jquery.

Table discoloration

The basic structure:

<table>
    <thead>
      <tr><th> name </th><th> sex </th><th> Temporary Residence </ th></tr>
    </thead>
    <tbody>
      <tr><td> John </td><td> male </TD ><td> Hangzhou </td></tr>
      <tr><td> Harry </td><td> women </td><td> Jiangsu </td></tr>
      <tr><td> si </td><td> man </td><td> Beijing </td></ tr>
      <tr><td> Zhao Liu </td><td> women </td><td> Lanzhou </td></tr>
      < Tr><td> often </td><td> men </td><td> Jiuquan </td></tr>
      <tr><td > Master Li </td><td> man </td><td> Tokyo </td></tr>
    </tbody>
  </table >

1, the ordinary interlacing color

First define two styles

 . even{
    background: #FFF38F;
  }
 . odd{
    background: #FFFFEE;
  }

　

Add discoloration

 $ (' tr:odd '). addclass (' odd ');
 $ (' Tr:even '). addclass (' even ');

2, the Single selection box control table row Highlight

A radio button is added before each row, and when a row is clicked, the row is highlighted and the Radio box is selected

$ (' tbody>tr '). Click (function () {
    $ (this)
      . addclass (' selected ').
      siblings (). Removeclass (' Selected '). End
      (). Find
      (': Radio '). attr (' checked ', true);
  });

3, check box control table row Highlight

  $ (' tbody>tr '). Click (function () {
    if ($ (this). Hasclass (' selected ')) {
      $ (this). Removeclass (' selected ')
          . Find (': CheckBox '). attr (' checked ', false);
    } else{
      $ (this). AddClass (' selected '). Find
          (': CheckBox '). attr (' checked ', true);
    }
  });

Table Expand Close

Basic structure:

<table> <thead> <tr><th></th><th> name </th><th> sex </th><th > Temporary Land </th></tr> </thead> <tbody> <tr class= "parent" id= "row_01" ><td COLSP an= "3" > Foreground Design Group </td></tr> <tr class= "child_row_01" ><td></td><td> John </td ><td> men </td><td> Hangzhou </td></tr> <tr class= "child_row_01" ><td></td ><td> Harry </td><td> Women </td><td> Jiangsu </td></tr> <tr class= "parent" id= "row _02 "><td colspan=" 3 "> Foreground Development Group </td></tr> <tr class=" child_row_02 "><td></td> <td> si </td><td> men </td><td> Beijing </td></tr> <tr class= "child_row_02" > <td></td><td> Zhao Liu </td><td> women </td><td> Lanzhou </td></tr> &LT;TR class= "Parent" id= "row_03" ><td colspan= "3" > Background Development Group;/td></tr> <tr class= "child_row_03" ><td></td><td> often </td><td> male </ td><td> Jiuquan </td></tr> <tr class= "child_row_03" ><td></td><td> Master Li </
 Td><td> men </td><td> Tokyo </td></tr> </tbody> </table>

To add an event, when clicked on a category title, this category closes or opens

  $ (' tr.parent '). Click (function () {
    $ (this). Toggleclass (' selected ')
       . Siblings ('. Child_ ' + this.id). Toggle () ;
  });

Table Content Filtering

Basic structure:

<table> <thead> <tr><th></th><th> name </th><th> sex </th><th > Temporary Land </th></tr> </thead> <tbody> <tr class= "parent" id= "row_01" ><td COLSP an= "3" > Foreground Design Group </td></tr> <tr class= "child_row_01" ><td></td><td> John </td ><td> men </td><td> Hangzhou </td></tr> <tr class= "child_row_01" ><td></td ><td> Harry </td><td> Women </td><td> Jiangsu </td></tr> <tr class= "parent" id= "row _02 "><td colspan=" 3 "> Foreground Development Group </td></tr> <tr class=" child_row_02 "><td></td> <td> si </td><td> men </td><td> Beijing </td></tr> <tr class= "child_row_02" > <td></td><td> Zhao Liu </td><td> women </td><td> Lanzhou </td></tr> &LT;TR class= "Parent" id= "row_03" ><td colspan= "3" > Background Development Group;/td></tr> <tr class= "child_row_03" ><td></td><td> often </td><td> male </ td><td> Jiuquan </td></tr> <tr class= "child_row_03" ><td></td><td> Master Li </  Td><td> </td><td> Tokyo </td></tr> </tbody> </table> <input type= "text"
 Id= "FilterName"/>

Adding events

 $ (' #filterName '). KeyUp (function () {
   $ (' table tbody tr '). Hide (). Filter (: Contains (' + ($ (this). Val ()) + "')". Show ();
 });

The above is the entire content of this article, I hope the content of this article for everyone's study or work can bring some help, but also hope that a lot of support cloud Habitat community!