jquery's actions on forms, tables, and more (middle: Table application)

Excerpt from the sharp jquery book

II. Application of Forms

1 Table Interlaced color (: Odd and : even selector P157)

$ (function () {
$ ("tr:odd"). AddClass ("odd"); Odd lines Add style
$ ("Tr:even"). AddClass ("even"); Even line add style (: Odd and: Index in even selector starting from 0)
})

2 Set the color of a line containing the specified text content (: contains selector P158)

$ (function () {
$ ("Tr:contains (' content ')"). AddClass ("selected");
})

3 Single marquee Control table row highlighting (find () method;: Radio,: Checked,: has selector 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");
When a table is initialized, it needs to be processed if a single box is selected by default
You can also write $ ("table:radio:checked"). Parent ("tr"). AddClass ("selected");
or $ ("Tbody>tr:has (: Checked)"). AddClass ("selected");
});
})

4 check box control table row highlighting (: has selector; use hasclass () method to judge P160)

$ ("Tr:has (: Checked)"). AddClass ("selected"); When you enter a page, process the table row that has been selected


$ ("tr"). Click (function () {
if ($ (this). Hasclass ("selected")) {//Determine if this style is included
$ (this). Removeclass ("selected"). Find (": CheckBox"). attr ("checked", false);
}else{
$ (this). AddClass ("selected"). Find (": CheckBox"). attr ("Checked", true);
}
})
The above code can be simplified by using ternary operations:
$ ("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 Table Expand Close (toggleclass () and Toggle () method; Use of property tips P161)
The DOM is as follows:

<table>
&LT;TR class= "Parent" id= "row_01" ><td> title 1</td></tr>
<tr class= "child_row_01" ><td> content 1</td></tr>
&LT;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 Table Content Filter Display (filter () method P163)

$ (function () {
$ ("tr"). Hide (). Filter (": Contains (' Li ')"). Show ();
})

7 table contents Filtered by input (P163)

$ (function () {
$ ("#filterName"). KeyUp (function () {
$ ("tr"). Hide (). Filter (": Contains (') + ($ (this). Val ()) +" ') ". Show ();
}). KeyUp (); When the DOM is loaded, the binding event is triggered immediately after completion, to prevent the filter effect from disappearing after the page is refreshed
})

jquery's actions on forms, tables, and more (middle: Table application)