用JavaScript實(shí)現(xiàn)類(lèi)似于ListBox功能示例代碼
更新時(shí)間：2014年03月09日 16:49:46 投稿：whsnow
這篇文章主要介紹了用JavaScript實(shí)現(xiàn)類(lèi)似于ListBox功能,需要的朋友可以參考下
JavaScript對(duì)于多項(xiàng)數(shù)據(jù)的請(qǐng)求和處理過(guò)程中，如何實(shí)現(xiàn)常常困擾很多程序員，如何進(jìn)行動(dòng)態(tài)編輯和刪除而不影響其他的數(shù)據(jù)項(xiàng)，今天介紹一種方法，可供借鑒，例如通過(guò)XmlRequest請(qǐng)求到如下數(shù)據(jù):
復(fù)制代碼 代碼如下:
<span style="font-size:14px;">{ "Table":
{ "Id": 2, "Type": "X", "Content": "藏羚羊是國(guó)家一級(jí)保護(hù)動(dòng)物是（）特有動(dòng)物",
"Akey": "青藏高原", "Bkey": "新疆",
"Ckey": "青海", "Dkey": null, "NUM": 2 },
{ "Id": 1, "Type": "X", "Content": "保護(hù)野生動(dòng)物有很多意義，不屬于其意義的是",
"Akey": "環(huán)境效應(yīng)", "Bkey": "文化價(jià)值",
"Ckey": "觀賞價(jià)值", "Dkey": null, "NUM": 1 }
]
}</span>
如何對(duì)在HTML中他們進(jìn)行顯示，并實(shí)現(xiàn)編輯和刪除工作，這里面涉及的json解析和數(shù)據(jù)分層顯示：
HTML顯示標(biāo)簽：
<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>
通過(guò)editSub(id)和Delete(id) 函數(shù)可以多每條數(shù)據(jù)進(jìn)行處理，實(shí)現(xiàn)類(lèi)似于ListBox的功能。
相關(guān)文章
Bootstrap零基礎(chǔ)學(xué)習(xí)第一課之模板
這篇文章主要為大家詳細(xì)介紹了Bootstrap零基礎(chǔ)學(xué)習(xí)第一課：模板，感興趣的小伙伴們可以參考一下2016-07-07
極力推薦10個(gè)短小實(shí)用的JavaScript代碼段
這篇文章主要為大家極力推薦10個(gè)短小實(shí)用的JavaScript代碼段，幫助大家節(jié)省大量開(kāi)發(fā)時(shí)間，感興趣的小伙伴們可以參考一下2016-08-08
Bootstrap入門(mén)書(shū)籍之（零）Bootstrap簡(jiǎn)介
Bootstrap是一個(gè)用于快速開(kāi)發(fā) Web 應(yīng)用程序和網(wǎng)站的前端框架。Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的。本文給大家介紹Bootstrap入門(mén)書(shū)籍之（零）Bootstrap簡(jiǎn)介，需要的朋友參考下2016-02-02
錄屏軟件對(duì)于我們來(lái)說(shuō)都不陌生了,本文我們要做的事情是實(shí)現(xiàn)自己的錄屏軟件,載體使用Electron,因?yàn)樗m合錄制桌面的場(chǎng)景,下面我們就來(lái)看看具體實(shí)現(xiàn)方法吧2024-01-01
JS實(shí)現(xiàn)帶緩沖效果打開(kāi)、關(guān)閉、移動(dòng)一個(gè)層的方法
這篇文章主要介紹了JS實(shí)現(xiàn)帶緩沖效果打開(kāi)、關(guān)閉、移動(dòng)一個(gè)層的方法,涉及javascript鼠標(biāo)事件及頁(yè)面元素操作技巧,需要的朋友可以參考下2015-05-05
在JavaScript中,通常我們不會(huì)直接使用`assert`這個(gè)詞,因?yàn)镴avaScript標(biāo)準(zhǔn)庫(kù)中并沒(méi)有直接提供`assert`函數(shù),下面是一個(gè)詳細(xì)的示例,展示如何在JavaScript中模擬`assert`函數(shù),并在`if`語(yǔ)句中嵌套使用它來(lái)檢查條件,需要的朋友可以參考下2024-09-09
這篇文章主要介紹了在weex中愉快的使用scss的方法步驟，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2020-01-01
點(diǎn)擊A元素觸發(fā)B元素的事件在IE8下會(huì)識(shí)別成A元素
IE8自動(dòng)觸發(fā)的事件源會(huì)識(shí)別成手動(dòng)點(diǎn)擊的元素就是點(diǎn)擊A元素觸發(fā)B元素的事件在IE8下會(huì)識(shí)別成A元素,需要的朋友可以參考下2014-09-09
JS實(shí)現(xiàn)把一個(gè)頁(yè)面層數(shù)據(jù)傳遞到另一個(gè)頁(yè)面的兩種方式
這篇文章主要介紹了JS實(shí)現(xiàn)把一個(gè)頁(yè)面層數(shù)據(jù)傳遞到另一個(gè)頁(yè)面的方式,本文給大家提供了兩種方式，需要的朋友可以參考下2018-08-08
layui table去掉右側(cè)滑動(dòng)條的實(shí)現(xiàn)方法
今天小編就為大家分享一篇layui table去掉右側(cè)滑動(dòng)條的實(shí)現(xiàn)方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2019-09-09