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

php中世界最好的语言
Release: 2018-04-25 10:42:01
Original
3423 people have browsed it

This time I will bring you a detailed explanation of the steps of jquery to implement a table withcheckbox, what are theprecautionsfor 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:
Detailed explanation of the steps to implement a table with checkboxes using jquery
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; }
Copy after login

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);//未选中添加样式 } }); });
Copy after login

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"); } }
Copy after login

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!

Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Recommendations
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
About us Disclaimer Sitemap
php.cn:Public welfare online PHP training,Help PHP learners grow quickly!