實(shí)現(xiàn)超用戶體驗(yàn) table排序javascript實(shí)現(xiàn)代碼
更新時(shí)間:2009年06月22日 12:31:59 作者:
實(shí)現(xiàn)超用戶體驗(yàn) table排序javascript實(shí)現(xiàn)代碼
以前我在網(wǎng)上總會(huì)看類似這種的JS效果:

點(diǎn)擊編輯時(shí): (不好意思哈,圖在文章最后面)
這種列表與編輯都在同一頁的效果,確實(shí)很好,能夠給用戶帶來意想不到的美好體驗(yàn)??墒撬窃趺磳?shí)現(xiàn)的呢?
其實(shí)實(shí)現(xiàn)這種效果有很多方法,當(dāng)然如果你的JS不好,可以用JQuery的組件,但是我想要是自己能寫出來總是好的。因此我抽了點(diǎn)時(shí)間來實(shí)現(xiàn)它。當(dāng)我實(shí)現(xiàn)后,發(fā)現(xiàn)要實(shí)現(xiàn)這種效果是很簡單的,幾行JS代碼就搞定了,關(guān)鍵就是一個(gè)思路問題,下面我會(huì)具體的寫是怎么實(shí)現(xiàn)的。
總體思路:給<TR>一個(gè)ID,以顯示與隱藏來實(shí)現(xiàn)這種效果。
首先,實(shí)現(xiàn)這個(gè)關(guān)鍵橋段就是“ID”,因?yàn)槟阋@示與隱藏某個(gè)<tr>,唯一能區(qū)別它們的就是它們的ID號(hào)了,當(dāng)然我們還是以循環(huán)輸出的形式“<tr style="color:#0033FF; display:none;" id="<?php echo $value['uuid'];?>">”。那么我們在JS代碼中就可以以它們的ID號(hào)來識(shí)別它們了。
但關(guān)鍵問題又來了,我們怎么取這個(gè)ID值呢?可能有朋友與我一樣想到了隱藏域,剛開始時(shí)我也這么想的,可是那是不行的,因?yàn)槟阌肑S取隱藏域中的值時(shí),那它的ID是定死了的,這樣你只能每次都取到第一個(gè)<tr>的ID號(hào),其它就取不到了。那又怎么辦呢??呵呵。。別急。。。人總是有辦法的。
我們還有“this”它呀,這個(gè)關(guān)鍵字確實(shí)是好東東,有了它“就天不怕,天不怕了”...
這樣:我們在觸發(fā)JS取值<TR>ID號(hào)的地方寫上“<a href='#' onclick="display(this.id)" id="<?php echo $value['uuid'];?>/m"> ”。。。這樣來我們就輕容取得了與<tr>類同(注意:為什么說類同我后面要說)的ID號(hào)了,可能細(xì)心的朋友已看到了我的代碼后有一個(gè)“/m”。。。寫這個(gè)的原因在于要與<tr>ID分開來,不然取不到值(ID是唯一性的)。。
這樣一來,如果<TR>的ID號(hào)為“1223”,那么我“onclick”事件取上來的值就是“1223/m”,我們在用JS的分割字符串的方法來得到與<tr>相同的ID號(hào)。“ var vaarray=va.split('/');var id=vaarray[0];”
。。好了。既然ID號(hào)都得到還有什么不能做的呢。。。呵呵呵。下面我們就讓它顯示出來?!癲ocument.getElementById(id).style.display="block";”
....OK..OVER...
下面是部分關(guān)鍵代碼:
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";//這里是相應(yīng)某個(gè)<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">
顯示<!--這里是觸發(fā)JS-->
</a> </th>
</tr>
另說明:1以上代碼可能我在發(fā)表時(shí)有誤,如不能實(shí)現(xiàn),可以聯(lián)系我。
2以上只是我的學(xué)習(xí)記錄,可能不專業(yè),如有錯(cuò)誤的地方,很歡迎你指出來,我一定加以改進(jìn)。

點(diǎn)擊編輯時(shí): (不好意思哈,圖在文章最后面)
這種列表與編輯都在同一頁的效果,確實(shí)很好,能夠給用戶帶來意想不到的美好體驗(yàn)??墒撬窃趺磳?shí)現(xiàn)的呢?
其實(shí)實(shí)現(xiàn)這種效果有很多方法,當(dāng)然如果你的JS不好,可以用JQuery的組件,但是我想要是自己能寫出來總是好的。因此我抽了點(diǎn)時(shí)間來實(shí)現(xiàn)它。當(dāng)我實(shí)現(xiàn)后,發(fā)現(xiàn)要實(shí)現(xiàn)這種效果是很簡單的,幾行JS代碼就搞定了,關(guān)鍵就是一個(gè)思路問題,下面我會(huì)具體的寫是怎么實(shí)現(xiàn)的。
總體思路:給<TR>一個(gè)ID,以顯示與隱藏來實(shí)現(xiàn)這種效果。
首先,實(shí)現(xiàn)這個(gè)關(guān)鍵橋段就是“ID”,因?yàn)槟阋@示與隱藏某個(gè)<tr>,唯一能區(qū)別它們的就是它們的ID號(hào)了,當(dāng)然我們還是以循環(huán)輸出的形式“<tr style="color:#0033FF; display:none;" id="<?php echo $value['uuid'];?>">”。那么我們在JS代碼中就可以以它們的ID號(hào)來識(shí)別它們了。
但關(guān)鍵問題又來了,我們怎么取這個(gè)ID值呢?可能有朋友與我一樣想到了隱藏域,剛開始時(shí)我也這么想的,可是那是不行的,因?yàn)槟阌肑S取隱藏域中的值時(shí),那它的ID是定死了的,這樣你只能每次都取到第一個(gè)<tr>的ID號(hào),其它就取不到了。那又怎么辦呢??呵呵。。別急。。。人總是有辦法的。
我們還有“this”它呀,這個(gè)關(guān)鍵字確實(shí)是好東東,有了它“就天不怕,天不怕了”...
這樣:我們在觸發(fā)JS取值<TR>ID號(hào)的地方寫上“<a href='#' onclick="display(this.id)" id="<?php echo $value['uuid'];?>/m"> ”。。。這樣來我們就輕容取得了與<tr>類同(注意:為什么說類同我后面要說)的ID號(hào)了,可能細(xì)心的朋友已看到了我的代碼后有一個(gè)“/m”。。。寫這個(gè)的原因在于要與<tr>ID分開來,不然取不到值(ID是唯一性的)。。
這樣一來,如果<TR>的ID號(hào)為“1223”,那么我“onclick”事件取上來的值就是“1223/m”,我們在用JS的分割字符串的方法來得到與<tr>相同的ID號(hào)。“ var vaarray=va.split('/');var id=vaarray[0];”
。。好了。既然ID號(hào)都得到還有什么不能做的呢。。。呵呵呵。下面我們就讓它顯示出來?!癲ocument.getElementById(id).style.display="block";”
....OK..OVER...
下面是部分關(guān)鍵代碼:
JS部分如下:
復(fù)制代碼 代碼如下:
//顯示
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";//這里是相應(yīng)某個(gè)<tr>的隱藏
}
HTML部分如下:
復(fù)制代碼 代碼如下:
<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">
顯示<!--這里是觸發(fā)JS-->
</a> </th>
</tr>
另說明:1以上代碼可能我在發(fā)表時(shí)有誤,如不能實(shí)現(xiàn),可以聯(lián)系我。
2以上只是我的學(xué)習(xí)記錄,可能不專業(yè),如有錯(cuò)誤的地方,很歡迎你指出來,我一定加以改進(jìn)。

相關(guān)文章
window.location.reload()方法刷新頁面彈出要再次顯示該網(wǎng)頁對話框
用window.location.reload()方法刷新頁面時(shí),IE彈出“要再次顯示該網(wǎng)頁....”對話框,解決辦法,接下來介紹下詳細(xì)的解決方法,感興趣的朋友可以參考下哈2013-04-04JS將時(shí)間的標(biāo)準(zhǔn)格式和時(shí)間戳格式和2022-01-27?00:00:00(年月日時(shí)分秒)格式相互轉(zhuǎn)換(最新推薦)
這篇文章主要介紹了JS如何將時(shí)間的標(biāo)準(zhǔn)格式和時(shí)間戳格式和2022-01-27?00:00:00(年月日時(shí)分秒)格式相互轉(zhuǎn)換,本文通過實(shí)例代碼給大家介紹的非常詳細(xì),對大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2023-05-05IE6/7/8中Option元素未設(shè)value時(shí)Select將獲取空字符串
可以看到當(dāng)忘記寫option的value時(shí)這些現(xiàn)代瀏覽器都會(huì)盡量返回正確的(客戶端程序員想要的)結(jié)果value,其容錯(cuò)性比IE6/7/8做的更好。2011-04-04完美解決mui框架off-canvas側(cè)滑超出部分隱藏?zé)o法滾動(dòng)的問題
下面小編就為大家分享一篇完美解決mui框架off-canvas側(cè)滑超出部分隱藏?zé)o法滾動(dòng)的問題,具有很好的參考價(jià)值,希望對大家有所幫助。一起跟隨小編過來看看吧2018-01-01用Golang運(yùn)行JavaScript的實(shí)現(xiàn)示例
這篇文章主要介紹了用Golang運(yùn)行JavaScript的實(shí)現(xiàn)示例,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-11-11echarts如何實(shí)現(xiàn)帶百分比的橫向柱狀圖
近期在使用echart開發(fā)過程中遇到一些問題,需要開發(fā)橫向柱狀圖,下面這篇文章主要給大家介紹了關(guān)于echarts如何實(shí)現(xiàn)帶百分比的橫向柱狀圖的相關(guān)資料,需要的朋友可以參考下2021-12-12