jquery Implementation with check box table rows highlight _jquery when deleted

Source: Internet
Author: User
Using the jquery technology to manipulate the table is a simple thing, through the syntax of jquery, you can easily complete the form of interlaced color, suspension highlighting, in the actual application may appear in the table with the check box, delete, the check box is the row of the record deleted. In this place, you can add a special effect, click a row to select the check box for the row, and the background color of the row is highlighted. This gives a good feeling.

The effect is as follows:

I do here are two features:
Function 1, click a row, the check box for the row is selected, and the background color is changed.
Function 2, click Select All/all do not select the label, change the color of the row.
Two features I encapsulated in the JS file, the use of the time to introduce on the line.
First look at the CSS code, I encapsulated in a CSS file
Copy Code code as follows:

. selected{
Background: #FF6500;
Color: #fff;
}

In the code to look at the JS file:
Code for Feature 1:
Copy Code code as follows:

/**
* Set the background color in the table containing the check box
*/
$ (document). Ready (function ()
{
/**
* The table row changes the background color when clicked
*/
$ ("#tablight tr:gt (0)"). Click (function ()//Get line 2nd
{
if ($ (this). Hasclass ("selected"))//Determine if selected
{
$ (this). Removeclass ("selected"). Find (": CheckBox"). attr ("checked", false);//select Remove style
}
else//Settings selected
{
$ (this). AddClass ("selected"). Find (": CheckBox"). attr ("Checked", true);/not selected add style
}
});
});

Code for Feature 2:
Copy Code code as follows:

/**
* Change background color after clicking Select All and Anti-selection
*/
function SetColor ()//Set the background color of TR
{
var Checkboxs = $ ("#tablight tr:gt (0) Input[type=checkbox]");/get all the check boxes
var boxeds = $ ("#tablight tr:gt (0) input[type=checkbox]:checked")//Get selected check box
if (Boxeds.length > 0)
{
Checkboxs.parent (). Parent (). AddClass ("selected");//check box in TD
}
Else
{
Checkboxs.parent (). Parent (). Removeclass ("selected");
}
}

If you want the code to take effect, you need to add the id attribute to the table, the property value is "Tablight", and the SetColor method is invoked after the full selection/all is selected.

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.