JavaScript を使用して ListBox 関数と同様のサンプル コードを実装する

JavaScript が複数のデータをリクエストして処理する場合、他のデータ項目に影響を与えずに動的に編集および削除する方法をどのように実装するかが多くのプログラマーを悩ませます。たとえば、XmlRequest データを使用して次のリクエストを行う方法を紹介します。

次のようにコードをコピーします。

<span style="font-size:14px;">{ "テーブル":

[

{ "ID": 3、"タイプ": "X"、

「内容」: 「中国共産党第18回党大会の報告書は、我が国における人民民主主義の重要な形態は何であるかを指摘しました。」、

"Akey": "草の根民主政治制度"、"Bkey": "人民会議制度"、

"Ckey": "多者連携システム", "Dkey": null, "NUM": 3 },

{ "Id": 2, "Type": "X", "Content": "チベットカモシカは国家一級保護動物であり、() の固有の動物です",

"Akey": "青海チベット高原"、"Bkey": "新疆"、

"Ckey": "青海"、"Dkey": null、"NUM": 2 }、

{ "Id": 1, "Type": "X", "Content": "野生動物の保護には多くの意味があり、それに含まれないものもあります",

"Akey": "環境効果"、"Bkey": "文化的価値"、

"Ckey": "表示値"、"Dkey": null、"NUM": 1 }

】

}

これらを HTML で表示し、json の解析とデータの階層表示を伴う編集と削除の作業を実装する方法:

HTML表示タグ:

<ul id="msg" name="msg"> </ul>

JavaScript はデータを解析して以下を表示します。

次のようにコードをコピーします。

<span style="font-size:14px;"> var response = xmlHttp.responseText;

eval("var result = + 応答);

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;

}

各データは editSub(id) および Delete(id) 関数を通じて処理され、ListBox と同様の機能を実現できます。