Detailed explanation of the steps to implement a table with checkboxes using jquery

This time I will bring you a detailed explanation of the steps of jquery to implement a table with checkbox , what are the precautions for jquery to implement a table with checkbox, the following is a practical case, one Get up and take a look.

It is a simple matter to operate the table through jquery technology. Through jquery's syntax, you can easily complete the table's interlaced color changing and floating highlighting. In actual applications, there may be duplicates in the table. For check boxes, When deleting, the record in the row where the check box is located will be deleted. Here, 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:

I have 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 introduce them when using them.
Let’s take a look at the CSS code first. I encapsulated it into a css file

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

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

/** 
* 设置含有复选框的表格中的背景色 
*/ 
$(
document
).ready(function() 
{ 
/** 
* 表格行被单击的时候改变背景色 
*/ 
$("#tablight tr:gt(0)").click(function() //获取第2行后 
{ 
if ($(this).hasClass("selected"))//判断是否选中 
{ 
$(this).removeClass("selected").find(":checkbox").attr("checked",false);//选中移除样式 
} 
else//设置选中 
{ 
$(this).addClass("selected").find(":checkbox").attr("checked",true);//未选中添加样式 
} 
}); 
});

Code of function 2 ：

/** 
* 单击全选和反选之后改变背景色 
*/ 
function setColor()//设置tr的背景颜色 
{ 
var checkboxs = $("#tablight tr:gt(0) input[type=checkbox]");//得到所有的复选框 
var boxeds = $("#tablight tr:gt(0) input[type=checkbox]:checked");//得到被选择的复选框 
if(boxeds.length > 0) 
{ 
checkboxs.parent().parent().addClass("selected");//复选框在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", and then call the setColor method after selecting/unselecting all at the same time.

I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related articles on the php Chinese website!

Recommended reading:

Detailed explanation of the difference between JSON.parse() and JSON.stringify() and how to use it

JS determines json What are the methods

The above is the detailed content of Detailed explanation of the steps to implement a table with checkboxes using jquery. For more information, please follow other related articles on the PHP Chinese website!