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

Source: Internet
Author: User

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)

Related Article

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.