JQuery learning path (6)-simple table application, jquery path

JQuery learning path (6)-simple table application, jquery path
Too many rows too many rowsIntroduction

　　　　Before CSS technology, the layout of web pages is basically made by tables. After CSS is available, tables are discarded by many designers, but tables are also useful, such as data lists, the following describes several common applications in the table to deepen the understanding of jQuery.

 

▓

Basic Structure:

1 <table> 2 <thead> 3 <tr> <th> name </th> <th> gender </th> <th> temporary location </th> </tr> 4 </thead> 5 <tbody> 6 <tr> <td> Zhang San </td> <td> male </td> <td> Hangzhou </td> </tr> 7 <tr> <td> Wang Wu </td> <td> female </td> <td> Jiangsu </td> </tr> 8 <tr> <td> LITH </td> <td> male </td> <td> Beijing </td> </tr> 9 <tr> <td> Zhao Liu </td> <td> female </td> <td> Lanzhou </td> </tr> 10 <tr> <td> regular </td> <td> male </td> <td> Jiuquan </td> </tr> 11 <tr> <td> Master Li </td> <td> male </td> <td> Tokyo </td> </ tr> 12 </tbody> 13 </table>

 

1. The color of the ordinary barrier

First, define two styles.

1     .even{2         background: #FFF38F;3     }4     .odd{5         background: #FFFFEE;6     }

　　　　

Add color change

1     $('tr:odd').addClass('odd');2     $('tr:even').addClass('even');

 

2. Single Sheet layout control table row highlighting

Add a single-choice button before each row. When a row is clicked, the row is highlighted and the single-choice button is selected.

1     $('tbody>tr').click(function(){2         $(this)3             .addClass('selected')4             .siblings().removeClass('selected')5             .end()6             .find(':radio').attr('checked',true);7     });

 

3. check boxes control table row highlighting

1     $('tbody>tr').click(function(){2         if($(this).hasClass('selected')){3             $(this).removeClass('selected')4                    .find(':checkbox').attr('checked',false);5         }else{6             $(this).addClass('selected')7                    .find(':checkbox').attr('checked',true);8         }9     });

 

 

Expand and close the tables

Basic Structure:

1 <table> 2 <thead> 3 <tr> <th> </th> <th> name </th> <th> gender </th> <th> temporary location </th> </tr> 4 </thead> 5 <tbody> 6 <tr class = "parent" id = "row_01"> <td colspan = "3"> front-end design group </td> </tr> 7 <tr class = "child_row_01"> <td> </td> <td> Zhang San </td> <td> male </td> <td> Hangzhou </td> </tr> 8 <tr class = "child_row_01"> <td> </td> <td> Wang Wu </td> <td> female </td> <td> Jiangsu </td> </tr> 9 10 <tr class = "parent" id = "row_02"> <td colspan = "3"> foreground development Team </td> </tr> 11 <tr class = "child_row_02"> <td> </td> <td> LITH </td> <td> male </td> <td> Beijing </td> </tr> 12 <tr class = "child_row_02"> <td> </td> <td> Zhao 6 </td> <td> female </td> <td> Lanzhou </td> </tr> 13 14 <tr class = "parent" id = "row_03"> <td colspan = "3"> Background Development Team </td> </tr> 15 <tr class = "child_row_03"> <td> </td> <td> regular </td> <td> male </td> <td> Jiuquan </td> </tr> 16 <tr class = "child_row_03"> <td> </td> <td> Master Li </td> <td> male </td> <td> Tokyo </td> </tr> 17 </tbody> 18 </table>

 

Add event. When you click a category title, the category is closed or opened.

1     $('tr.parent').click(function(){2         $(this).toggleClass('selected')3                .siblings('.child_' + this.id).toggle();4     });

 

▓ Table content filtering

Basic Structure:

1 <table> 2 <thead> 3 <tr> <th> </th> <th> name </th> <th> gender </th> <th> temporary location </th> </tr> 4 </thead> 5 <tbody> 6 <tr class = "parent" id = "row_01"> <td colspan = "3"> front-end design group </td> </tr> 7 <tr class = "child_row_01"> <td> </td> <td> Zhang San </td> <td> male </td> <td> Hangzhou </td> </tr> 8 <tr class = "child_row_01"> <td> </td> <td> Wang Wu </td> <td> female </td> <td> Jiangsu </td> </tr> 9 10 <tr class = "parent" id = "row_02"> <td colspan = "3"> foreground development Team </td> </tr> 11 <tr class = "child_row_02"> <td> </td> <td> LITH </td> <td> male </td> <td> Beijing </td> </tr> 12 <tr class = "child_row_02"> <td> </td> <td> Zhao 6 </td> <td> female </td> <td> Lanzhou </td> </tr> 13 14 <tr class = "parent" id = "row_03"> <td colspan = "3"> Background Development Team </td> </tr> 15 <tr class = "child_row_03"> <td> </td> <td> regular </td> <td> male </td> <td> Jiuquan </td> </tr> 16 <tr class = "child_row_03"> <td> </td> <td> Master Li </td> <td> male </td> <td> Tokyo </td> </tr> 17 </tbody> 18 </table> 19 <input type = "text" id =" filterName "/>

 

Add event

1     $('#filterName').keyup(function(){2         $('table tbody tr').hide().filter(":contains(' "+($(this).val())+" ' )").show();3     });