jquery implements table rows with checkboxes to be highlighted when selected and deleted_jquery

It is a simple matter to operate the table through jquery technology. Through jquery's syntax, you can easily change the color of the table and suspend the highlighting. In actual applications, there may be check boxes in the table. When deleting, , delete the record in the row where the check box is located. In this place, you can add a special effect. When you click on a row, the check box of the row is selected, and the background color of the row is also highlighted. This feels very good.

The effect is as follows:

There are two functions here:
Function 1. Click a row, the check box of the row is selected, and change it at the same time Background color.
Function 2. Change the color of the row after clicking the Select All/Deselect All label.
I have encapsulated the two functions into js files and just import them when using them.
Let’s take a look at the CSS code first. I encapsulated it into a css file

Copy the code The code is as follows:

.selected{
background:#FF6500;
color:#fff;
}

Looking at the code of the js file:
Function 1 Code:

Copy code The code is as follows:

/**
* Set the background color in the table containing checkboxes
*/
$(document).ready(function()
{
/**
* Change the background color when a table row is clicked
*/
$("#tablight tr:gt(0)").click(function() // After getting line 2
{
if ($(this).hasClass("selected"))//Determine whether it is selected
{
$(this).removeClass("selected"). find(":checkbox").attr("checked",false);//Select to remove style
}
else//Set selected
{
$(this).addClass(" selected").find(":checkbox").attr("checked",true);//Add style if not selected
}
});
});

Code for function 2:

Copy code The code is as follows:

/**
* Change the background color after clicking to select all and invert selection
*/
function setColor()//Set the background color of tr
{
var checkboxs = $("#tablight tr:gt(0) input[type=checkbox]");//Get All checkboxes
var boxeds = $("#tablight tr:gt(0) input[type=checkbox]:checked");//Get the selected checkbox
if(boxeds.length > 0)
{
checkboxs.parent().parent().addClass("selected");//The checkbox is 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 attribute value is "tablight". Just call the setColor method after selecting/unselecting all at the same time.