To achieve a Super User Experience table sorting javascript code I used to always see this JS effect on the Internet:
Click Edit: (Sorry, the figure is at the end of the article)
The results of this list and editing are on the same page, which is really good and can bring unexpected good experiences to users. But how is it implemented?
In fact, there are many ways to achieve this effect. Of course, if your JS is not good, you can use JQuery components, but it is always good for me to write it by myself. So I took some time to implement it. After implementation, I found that it was very easy to achieve this effect. several lines of JS Code were completed. The key is a problem of thinking. How can I implement it.
General idea:An ID to be displayed and hidden to achieve this effect.
First, the Key Bridge segment is "ID", because you need to display and hideThe only difference between them is their ID number. Of course, we still use the form of circular output"". Then we can identify them with their idnumbers in JS Code.
But the key question comes again. How can we get this ID value? Some may think of hidden domains like me. I thought so at the beginning, but that is not acceptable, because when you use JS to retrieve values in hidden domains, then its ID is fixed, so you can only get the first. What should we do ?? Haha .. Don't worry... People always have a way.
We still have "this". this keyword is indeed a good stuff. With it, "It's not afraid of the day, it's not afraid of the day "...
In this way, the JS value is triggered.Enter "/m"> "in the ID "... In this way, we have achievedSimilar (Note: Why is the same as the ID number I want to talk about later), maybe a careful friend has read my code and there is a "/m "... The reason for writing this isIDs are separated, otherwise they cannot be obtained (ID is unique )..
In this way, ifThe ID number is "1223", so the value of the "onclick" event is "1223/m". We are using the JS string splitting method to obtainThe same ID number. "Var vaarray = va. split ('/'); var id = vaarray [0];"
.. Okay. What else can't I do if I get the ID number... Heheh. Let's show it. "Document. getElementById (id). style. display =" block ";"
... OK... OVER...
The following are some key code:
The JS section is as follows:
The Code is as follows:
// Display
Function display (va ){
Var vaarray = va. split ('/');
Var id = vaarray [0];
Document. getElementById (id). style. display = "block ";
Var parID = id + 'P ';
Document. getElementById (parID). style. display = "none"; //Hide
}
The HTML section is as follows:
The Code is as follows:
Modify
/M ">
Display
Note: 1. The above code may be incorrect when I post it. If not, contact me.
2. The above is just my learning record and may not be professional. If you have any mistakes, you are welcome to point it out and I will definitely improve it.
