Achieve super user experience table sorting javascript implementation code_javascript skills

I used to see JS effects like this on the Internet:

When clicking edit: (Sorry, the picture is at the end of the article)
This kind of list and editing are both on the same page The effect is indeed very good and can bring users an unexpected and wonderful experience. But how is it achieved?
In fact, there are many ways to achieve this effect. Of course, if your JS is not good, you can use JQuery components, but I think it is always better if you can write it yourself. So I took some time to make it happen. After I implemented it, I found that it is very simple to achieve this effect. It can be done with just a few lines of JS code. The key is a question of thinking. I will write down how to achieve it in detail.
General idea: Give an ID to show and hide to achieve this effect.
First of all, the key part to realize this is "ID", because you want to show and hide a certain , the only thing that can distinguish them is their ID number. Of course, we still output it in the form of a loop "< ;tr style="max-width:90%" id="">". Then we can identify them by their ID numbers in the JS code.
But the key question comes again, how do we get this ID value? There may be friends who thought of hidden fields like me. I thought the same way at the beginning, but that doesn’t work because when you use JS to get the value in the hidden field, its ID is fixed, so you can You can only get the ID number of the first every time, but you can't get the others. So what? ? hehe. . Don't worry. . . People always have a way.
We also have "this". This keyword is indeed a good thing. With it, "there will be no fear of the sky, no fear of the sky"...
This way: we are triggering the JS value ". . . In this way, we can easily obtain an ID number that is similar to (note: I will explain why it is similar later). Perhaps careful friends have seen that there is a "/m" after my code. . . The reason for writing this is to separate it from the ID, otherwise the value cannot be obtained (ID is unique). .
In this way, if the ID number of is "1223", then the value taken from my "onclick" event is "1223/m". We are using JS's method of splitting strings to get the Same ID number. "var vaarray=va.split('/');var id=vaarray[0];"
. . alright. Now that I have the ID number, what can't I do? . . Hahaha. Let's show it below. "document.getElementById(id).style.display="block";"
....OK..OVER...
The following is some key code:
The JS part is as follows:

Copy code 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";//Here is the hidden
} corresponding to a certain

HTML part is as follows:

Copy code The code is as follows:

Modify






Display

Another note: 1 or more codes are possible I made a mistake when publishing. If it cannot be implemented, please contact me.
2 The above is just my study record, which may not be professional. If there are any mistakes, you are welcome to point them out and I will definitely improve them.