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