[Front-end]: job editing box, front-end job editing box

[Front-end]: job editing box, front-end job editing box

Preface:Learning jQuery over the past few days, I feel that jQuery is more knowledgeable than Dom ...... The following edit box first plays a foreplay for jQuery, and then writes jQuery tomorrow or the day after tomorrow.

Requirements (SEE ):

 

Ideas:

1. First, write a table, and then write the pop-up div (the pop-up box is called below). This is very simple! If not, check out my previous blog on the front-end. Of course, the pop-up effect is not implemented at this time.

2. Add some input labels in the pop-up box, and then you need to think: how to display the pop-up box when you click the edit button ?? Okay. Come up with the style. hide {display: none;}: Add a style hide to the pop-up box. When the onclick event is triggered, find the div tag in the pop-up box and remove the hide style.

3. Next, you will find that the click submit and cancel pop-up boxes do not respond, and it is not refreshing. According to idea 2, you can hide the pop-up box by adding the hide style to the click !!

4. Now the pop-up and cancellation effects have been realized! However, you will find that the input boxes of host names, IP addresses, and ports are empty. How can I get table data and write it in the corresponding input box? Simple. Take the host name as an example. First, find the label corresponding to the table host name, obtain the text content text, and then set the value attribute for the input box, attr ("value", text ); in this case, the input box has the value attribute, and the attribute value is the corresponding content of the table!

5. Note that the submit button is the submit tag. Therefore, the submit button dialog box is hidden. However, if you forget to write the IP address, you should not submit the IP address at this time. (For example, if the password is not written during logon, you cannot log on. At this time, the system will automatically prompt that the password is blank ). What should we do? You can find three input tags $ ('input [type = text] '). each (function () {}, and cycle them. If the input box is empty, set it to red. Why is return ret ?? Because the submit tag has the attributes of the submitted information, but I defined a click event for it and called the Sure () method as soon as it clicked. When the Sure () method returns false, the submission attribute of itself is not executed. An error message is displayed. When return true, the request is submitted to the background.

1 function Sure () {2 // var return_host = document. getElementById ("hostname "). text (); 3 // var return_host = $ ('# hostname '). attr ("value"); 4 // var return_host =$ ('# hostname '). val (); 5 dic ={}; 6 var ret = true; 7 $ ('input [type = text] '). each (function () {8 var value = $ (this ). val (); 9 var id = $ (this ). attr ("id"); 10 dic [id] = value; 11 if (value. trim () = 0) {// If the input is empty after editing, 12 characters (this).css ("border-color", "red"); // when the input is empty, set color 13 ret = false for the input box; 14} else {15 colors (this).css ("border-color", "green"); 16} 17}); 18 console. log (dic); 19 return ret; 20}

 

 

The Edit button is not clicked:

When you click Edit, the following dialog box appears:

If the IP address input box is blank, click OK:

 

Source code reference:

1 <! DOCTYPE html> 2 View Code