Implementing a Super User Experience table sort JavaScript implements code _javascript skills

Source: Internet
Author: User
Tags uuid
I used to see this kind of JS effect online:

Click Edit: (sorry ha, the picture at the end of the article)
This kind of list and edit all on the same page effect, is really good, can give the user to bring unexpected wonderful experience. But how does it come true?
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 want to be able to write it is always good. So I took a little time to make it happen. When I realized that to achieve this effect is very simple, a few lines of JS code is done, the key is a problem of thinking, the following I will be specific to write how to achieve.
General idea: give <TR> an ID to show and hide to achieve this effect.
First, the implementation of this key bridge is "id", because you want to show and hide a <tr&gt, the only thing that can distinguish them is their ID number, of course, we still in the form of circular output "<tr style=" color: #0033FF; Display:none "id=" <?php echo $value [' uuid '];? > ">". Then we can identify them by their ID number in the JS code.
But the key question is again, how do we take this ID value? Maybe a friend like me thought of a hidden field, at first I think so, but that is not, because you use JS to hide the value of the field, it's ID is dead, so you can only get the first <tr> ID number, the other will not be taken. And what then?? Oh.. Don't worry ... People always have a way.
We also have "this" it ah, this keyword is really good dongdong, with it "on the fearless, fearless" ...
So: We write "<a href= ' onclick=" display (this.id) "id=" <?php echo $value [' uuid '] in the place where we trigger JS to take the value <tr>id number. >/m ">" ... In this way we have achieved the same with <tr> (note: Why the same as I would like to say) ID number, may be careful friend has seen my code after a "M" ... The reason to write this is to separate from the <tr>id, or not to get the value (ID is unique).
Thus, if the <TR> ID number is "1223", then my "onclick" event to fetch the value is "1223/m", we use the method of JS split string to get the same ID number as <tr>. "Var vaarray=va.split ('/'); var id=vaarray[0];"
。。 All right. Now that the ID number is available, what can not be done ... Oh ah. Let's let it show up below. "document.getElementById (ID). style.display=" Block ";"
.... Ok.. Over ...
Here are some of the key codes:
The JS section is as follows:
Copy Code code as follows:

Show
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";//This is the corresponding <tr> hidden
}

The HTML section is as follows:
Copy Code code as follows:

<tr bgcolor= "#D3DCE3" style= "color: #0033FF; Display:none "id=" <?php echo $value [' uuid '];? > ">
<th width= "13%" > Modification
<input type= "button" name= "Input" value= "save"/>
<input type= "button" name= "Input" value= "Cancel" onclick= "Backs (this.id)" id= "<?php echo $value [' uuid '];? >/n "/></th>
<th width= "11%" ><input name= "text" type= "text" value= "<?php echo $value [' username '];? > "/></th>
<th width= "15%" ><input name= "text" type= "text" value= "<?php echo $value [' createtime '];? > "/></th>
<th width= "8%" ><input type= "text" name= "input" value= "<?php echo $value [' uuid '];? > "/></th>
<th> <a href= ' # ' onclick= ' Display (this.id) "id=" <?php echo $value [' uuid '];? >/m ">
Show <!--This is the trigger js-->.
</a> </th>
</tr>

Another note: More than 1 of the code may be published when I was wrong, if not achieved, you can contact me.
More than 2 is only my study record, may not be professional, if there is a mistake, you are welcome to point out, I will certainly improve.
Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.