用JavaScript實現(xiàn)類似于ListBox功能示例代碼
更新時間：2014年03月09日 16:49:46 投稿：whsnow
這篇文章主要介紹了用JavaScript實現(xiàn)類似于ListBox功能,需要的朋友可以參考下
JavaScript對于多項數(shù)據(jù)的請求和處理過程中，如何實現(xiàn)常常困擾很多程序員，如何進行動態(tài)編輯和刪除而不影響其他的數(shù)據(jù)項，今天介紹一種方法，可供借鑒，例如通過XmlRequest請求到如下數(shù)據(jù):
復(fù)制代碼 代碼如下:
<span style="font-size:14px;">{ "Table":
{ "Id": 2, "Type": "X", "Content": "藏羚羊是國家一級保護動物是（）特有動物",
"Akey": "青藏高原", "Bkey": "新疆",
"Ckey": "青海", "Dkey": null, "NUM": 2 },
{ "Id": 1, "Type": "X", "Content": "保護野生動物有很多意義，不屬于其意義的是",
"Akey": "環(huán)境效應(yīng)", "Bkey": "文化價值",
"Ckey": "觀賞價值", "Dkey": null, "NUM": 1 }
]
}</span>
如何對在HTML中他們進行顯示，并實現(xiàn)編輯和刪除工作，這里面涉及的json解析和數(shù)據(jù)分層顯示：
HTML顯示標簽：
<ul id="msg" name="msg"> </ul>
JavaScript解析數(shù)據(jù)并顯示：
復(fù)制代碼 代碼如下:
<span style="font-size:14px;"> var response = xmlHttp.responseText;
eval("var result =" + response);
var len = result.Table.length;
if (len > 0) {
var msg = "";
for (var i = 0; i < len; i++) {
msg += "<li><span>" + result.Table[i].Content + "</span>";
msg += "<span>" + result.Table[i].Akey + "</span>";
msg += "<span>" + result.Table[i].Bkey + "</span>";
msg += "<span>" + result.Table[i].Ckey + "</span>";
msg += "<span>" + result.Table[i].Dkey + "</span>";
msg += "<a href='###' onclick=\"editSub('" + result.Table[i].Id + "')\">編輯</a>";
msg += " <a href='###' onclick='Delete(" + result.Table[i].Id + ")'>刪除</a>";
msg += "</li>";
}
document.getElementById("msg").innerHTML = msg;
}</span>
通過editSub(id)和Delete(id) 函數(shù)可以多每條數(shù)據(jù)進行處理，實現(xiàn)類似于ListBox的功能。
相關(guān)文章
本篇文章主要介紹了原生js實現(xiàn)輪播圖的示例代碼，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-02-02
如果你希望求某一特定路徑（例如從根到葉子）上數(shù)字的和,那么問題就轉(zhuǎn)變?yōu)榱恕扒蠖鏄鋸母饺~的所有路徑和”,所以本文給大家介紹了如何使用JavaScript求二叉樹從根到葉的所有路徑和,需要的朋友可以參考下2023-10-10
javascript showModalDialog傳值與FireFox的window.open 父子窗口傳值示例
javascript showModalDialog傳值與FireFox的window.open 父子窗口傳值示例代碼。2009-11-11
這篇文章主要介紹了js實現(xiàn)頂部可折疊的菜單工具欄效果,可實現(xiàn)鼠標滑過菜單工具欄出現(xiàn)折疊與展開效果,涉及javascript鼠標事件及樣式的操作技巧,需要的朋友可以參考下2015-05-05
IE 緩存策略的BUG的解決方法...2007-07-07
這篇文章主要介紹了JavaScript取得鍵盤按下方向鍵是哪個的方法,涉及javascript針對鍵盤按鍵事件的判定技巧,具有一定參考借鑒價值,需要的朋友可以參考下2015-08-08
koa2服務(wù)端使用jwt進行鑒權(quán)及路由權(quán)限分發(fā)的流程分析
這篇文章主要介紹了koa2服務(wù)端使用jwt進行鑒權(quán)及路由權(quán)限分發(fā) ,本文給大家介紹的非常詳細，具有一定的參考借鑒價值，需要的朋友可以參考下2019-07-07
本文介紹了js實現(xiàn)頁面刷新滾動條位置不變的實例代碼，需要的朋友可以看下2016-11-11
JavaScript中介者模式是一種行為型設(shè)計模式,用于降低多個對象之間的耦合性,在中介者模式中,多個對象之間不直接相互通信,而是通過中介者進行通信, 本文就來給大家詳細的介紹一下JS設(shè)計模式之中介者模式使用方法,需要的朋友可以參考下2023-08-08
這篇文章主要介紹了一些工作中常用js功能的匯總，幫助大家提高工作效率，加深對js的理解，感興趣的朋友可以了解下2020-11-11