Key points in sharp jquery (4) jquery's operations on forms and tables and more applications (medium: Table applications)

Key points in sharp jquery (4) jquery's operations on forms and tables and more applications (medium: Table applications)

 

Ii. Table applications

 

1. The table is discolored by the row (: OddAnd: EvenSelector p157)

 $ (Function (){
$ ("TR: odd"). addclass ("odd"); // Add a style to an odd number of rows
$ ("TR: Even"). addclass ("even"); // Add a style to an even row (the index in the odd and: Even selector starts from 0)
})

 

2. Set the color of a line containing the specified text (: ContainsSelector p158)

 $ (Function (){
$ ("TR: Contains ('content')"). addclass ("selected ");
})

 

3. Single Sheet layout controls table row highlighting (Find ()Method;: Radio,: Checked,: HasSelector p158)

 // Dom such as: <Table> <tr> <TD> <input type = "radio"/> </TD> </tr>... </table>
$ (Function (){
$ ("TR"). Click (function (){
$ (This ). addclass ("selected "). siblings (). removeclass ("selected "). end (). find (": Radio "). ATTR ("checked", true );
$ ("Table: Radio: checked"). Parent (). Parent (). addclass ("selected ");
// If a single sheet is selected by default during table initialization, it must be processed.
// You can also write $ ("table: Radio: checked"). Parent ("TR"). addclass ("selected ");
// Or $ ("tbody> TR: Has (: checked)"). addclass ("selected ");
});
})

 

4 check boxes control table row highlighting (: HasSelector; UseHasclass ()Method to Determine p160)

 $ ("TR: Has (: checked)"). addclass ("selected"); // when you enter the page, process the selected table rows.


$ ("TR"). Click (function (){
If ($ (this). hasclass ("selected") {// determines whether the style exists.
$ (This). removeclass ("selected"). Find (": checkbox"). ATTR ("checked", false );
} Else {
$ (This). addclass ("selected"). Find (": checkbox"). ATTR ("checked", true );
}
})
// The above code can be simplified to the following three elements:
$ ("TR"). Click (function (){
VaR hasselected = $ (this). hasclass ("selected ");
$ (This) [hasselected? "Removeclass": "addclass"] ("selected"). Find (": checkbox"). ATTR ("checked ",! Hasselected );
// Note: $ (this) ["addclass"] ("selected"); equivalent to $ (this). addclass ("selected ");
})

 

5. Close the table (Toggleclass ()AndToggle ()Method; use of the attribute technique p161)
DOM:

 <Table>
<Tr class = "parent" id = "row_01"> <TD> Title 1 </TD> </tr>
<Tr class = "child_row_01"> <TD> content 1 </TD> </tr>
<Tr class = "parent" id = "row_02"> <TD> Title 2 </TD> </tr>
<Tr class = "child_row_02"> <TD> content 2 </TD> </tr>
</Table>

 

 $(function(){
$("tr.parent").click(function(){
$(this).toggleClass("selected").siblings(".child_" + this.id).toggle();
});
})

 

6. Filter and display table content (Filter ()Method p163)

 $ (Function (){
$ ("TR"). Hide (). Filter (": Contains ('lil')"). Show ();
})

 

7. filter the table content by input (p163)

 $ (Function (){
$ ("# Filtername"). keyup (function (){
$ ("TR "). hide (). filter (": Contains ('" + ($ (this ). val () + "')"). show ();
}). Keyup (); // triggered immediately after the binding event is completed when the Dom is loaded to prevent the filtering effect from disappearing after the page is refreshed.
})