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.
