實現超使用者體驗 table排序javascript實現代碼

以前我在網上總會看類似這種的JS效果：

點擊編輯時: (不好意思哈，圖在文章最後面)
這種列表與編輯都在同一頁的效果，確實很好，能夠給使用者帶來意想不到的美好體驗。可是它是怎麼實現的呢？
其實實現這種效果有很多方法，當然如果你的JS不好，可以用JQuery的組件，但是我想要是自己能寫出來總是好的。因此我抽了點時間來實現它。當我實現後，發現要實現這種效果是很簡單的，幾行JS代碼就搞定了，關鍵就是一個思路問題，下面我會具體的寫是怎麼實現的。
總體思路：給<TR>一個ID，以顯示與隱藏來實現這種效果。
首先，實現這個關鍵橋段就是“ID”，因為你要顯示與隱藏某個<tr>，唯一能區別它們的就是它們的ID號了，當然我們還是以迴圈輸出的形式“<tr style="color:#0033FF; display:none;" id="<?php echo $value['uuid'];?>">”。那麼我們在JS代碼中就可以以它們的ID號來識別它們了。
但關鍵問題又來了，我們怎麼取這個ID值呢？可能有朋友與我一樣想到了隱藏欄位，剛開始時我也這麼想的，可是那是不行的，因為你用JS取隱藏欄位中的值時，那它的ID是定死了的，這樣你只能每次都取到第一個<tr>的ID號，其它就取不到了。那又怎麼辦呢？？呵呵。。別急。。。人總是有辦法的。
我們還有“this”它呀，這個關鍵字確實是好東東，有了它“就天不怕，天不怕了”...
這樣：我們在觸發JS取值<TR>ID號的地方寫上“<a href='#' onclick="display(this.id)" id="<?php echo $value['uuid'];?>/m"> ”。。。這樣來我們就輕容取得了與<tr>類同（注意：為什麼說類同我後面要說）的ID號了，可能細心的朋友已看到了My Code後有一個“/m”。。。寫這個的原因在於要與<tr>ID分開來，不然取不到值（ID是唯一性的）。。
這樣一來，如果<TR>的ID號為“1223”，那麼我“onclick”事件取上來的值就是“1223/m”，我們在用JS的分割字串的方法來得到與<tr>相同的ID號。“ var vaarray=va.split('/');var id=vaarray[0];”
。。好了。既然ID號都得到還有什麼不能做的呢。。。呵呵呵。下面我們就讓它顯示出來。“document.getElementById(id).style.display="block";”
....OK..OVER...
下面是部分關鍵代碼：
JS部分如下： 複製代碼 代碼如下://顯示
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";//這裡是相應某個<tr>的隱藏
}

HTML部分如下： 複製代碼 代碼如下:<tr bgcolor="#D3DCE3" style="color:#0033FF; display:none;" id="<?php echo $value['uuid'];?>">
<th width="13%">修改
<input type="button" name="Input" value="儲存"/>
<input type="button" name="Input" value="取消" 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">
顯示<!--這裡是觸發JS-->
</a> </th>
</tr>

另說明：1以上代碼可能我在發表時有誤，如不能實現，可以聯絡我。
2以上只是我的學習記錄，可能不專業，如有錯誤的地方，很歡迎你指出來，我一定加以改進。