jquery Implementation with check box table row Select highlight when delete

In the actual application, there may be a check box in the table, delete the record of the row where the check box is deleted. In this place, you can add a special effect, click a row to select the check box for that row, and the background color of the row is highlighted

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 2nd line after


{


if ($ (this). Hasclass ("selected"))//Determine if
is selected

{


$ (this). Removeclass ("selected"). Find (": CheckBox"). attr ("checked", false);//select Remove Style


}


else//settings are selected


{


$ (this). AddClass ("selected"). Find (": CheckBox"). attr ("Checked", true);/not selected add Style


}


});


});

Code for Feature 2:

Copy Code code as follows:


/**


* Click Select All and reverse to change background color


*/


function SetColor ()//Set the background color of TR


{


var Checkboxs = $ ("#tablight tr:gt (0) Input[type=checkbox]");/Get all 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.