PHP Basic Class Beginner experience: Using JQ to achieve the full selection of forms, anti-selection, cancellation and deletion function

Abstract: I have just participated in basic PHP training, because there is no foundation, the experience of sharing may not be standardized, the method may also "heterodoxy", can not guarantee the quality, only for their own summary of learning, but also hope to help the same beginner friends, and common progress. Here to share some of our basic class students encounter some of the doubts and my analysis. PS: Analysis is not necessarily correct, hope peer advice

The previous period of time I have a bad cold, the body is not comfortable, but also asked a day off not to go to the actual class, the podcast did not have time to share with you. Today, the cold has been good enough, leaving a little snot throat itch, just today is the rest of the day without classes, here strike while, hurriedly to share what you learned yesterday with the JQ implementation of certain functions of the form. First, let's take a look at the effect we need to make:

Here we want to achieve the effect is to click on the "Select All" all the checkbox will be ticked, click "Cancel" all do not tick, point "anti-select" Hook does not hit the hook, do not tick the hook, click "Delete" those who tick the line to delete.

Next we look at the existing HTML code, CSS will not look, just decorate it:

Idea 1: First here to give four buttons are bound mouse click on the event will be processed

Idea 2: Then the next author uses the JQ plug-in mechanism just learned. Then get the "Select All", "reverse" and "Cancel" the three button click Trigger event handler function

Since these three are all relatively simple, note that here we are getting triggered by a button, but the checkbox calls the function that triggered the post-processing. This is good to find the row to delete this object.

"Select All" to allow the checkbox to call the function, the function to add checked= "true" this property and property values, you can achieve the selected effect

"Cancel" is just the opposite, the attribute value of true to flase, so that he did not select the line

"Counter-election" here to use a bit of logic, but relatively simple, is to choose to change no choice, there is no choice, we can easily think of this is a conditional logic, we choose if statement

Broadly as follows:

Pay attention to something. The function object created by the plug-in mechanism is the JQ object, so students are careful not to use the JQ object JS method, or vice versa!

Idea 3, then I think the comparison is difficult place is in the deletion section, below I do delete.

Since we are using a checkbox to invoke the handler, and we are going to delete the whole line, the TR element

, the Blue is Checbox and TR, in fact, the author is not very accurate here, not a checkbox call, is to find the checkbox element input to invoke

and to delete the TR, this to find the input element of the parent element TD, then the parent element TR, which is to be found, so the following shows the author directly through the cross-hierarchy to find the deletion of the target element to delete the method:

This is still a good idea, and remove () is a method of JQ that removes the elements and elements of the calling method that contain the content. The IF statement inside is the conditional judgment, which is used to determine if the checkbox has been selected for the tick,

Features are also illustrated in the drawings, is simple violence, suitable for the time of the lower level

Then let's say another way, this is our lecturer Peng Big method, seemingly work commonly used:

Here the idea is basically the same, by looking for a relationship to find the deletion target, trigger delete function Delete

The difference is this "relationship", here is the input element that was found using the checkbox from the beginning

By finding the input element, set an ID and value in it, and then set an ID and a value in the target TR element to be removed, by the character relationship between the two values, note the character!

Here to the students who do not understand, such as a is Apple 1,b is Apple 12, to pass A to B, in a "Apple 1" after adding a character "2" change "Apple 12", is b

Here's the idea.

So that's it.

The red circle is to find the checkbox is selected, checked value is true, and then collect the attribute value of the ID of the INPUT element, and then through the basket, the hoop is to give the ID value of the value of processing and then into the TR element id attribute values, and then by it to call the Remove () method to delete

Here's where the yellow circle is used to empty each time the delete function is run, the value of the id attribute collected by the red circle, mainly to avoid confusion and unnecessary resource consumption

The above figure Method 2 of the instructions forgot to change, Method 2 is specific should be the appropriate level difference, or do not want to find the hierarchy of the time to use

And then you get the effect.

PHP Basic Class Beginner experience: Using JQ to achieve the full selection of forms, anti-selection, cancellation and deletion function