用JavaScript实现类似于ListBox功能示例代码

 这篇文章主要介绍了用JavaScript实现类似于ListBox功能,需要的朋友可以参考下

JavaScript对于多项数据的请求和处理过程中,如何实现常常困扰很多程序员,如何进行动态编辑和删除而不影响其他的数据项,今天介绍一种方法,可供借鉴,例如通过XmlRequest请求到如下数据: 
代码如下:
<span style="font-size:14px;">{ "Table": 

{ "Id": 3, "Type": "X", 
"Content": "党的十八大报告指出,我国人民民主的重要形式是什么?", 
"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 } 

}</span> 
 
如何对在HTML中他们进行显示,并实现编辑和删除工作,这里面涉及的json解析和数据分层显示: 
 
HTML显示标签: 
 
<ul id="msg" name="msg"> </ul> 
 
JavaScript解析数据并显示: 
代码如下:
<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) 函数可以多每条数据进行处理,实现类似于ListBox的功能。 
 

时间: 2024-08-02 23:25:16

用JavaScript实现类似于ListBox功能示例代码的相关文章

用JavaScript实现类似于ListBox功能示例代码_javascript技巧

JavaScript对于多项数据的请求和处理过程中,如何实现常常困扰很多程序员,如何进行动态编辑和删除而不影响其他的数据项,今天介绍一种方法,可供借鉴,例如通过XmlRequest请求到如下数据: 复制代码 代码如下: <span style="font-size:14px;">{ "Table": [ { "Id": 3, "Type": "X", "Content": &

JavaScript禁止页面操作的示例代码

 本篇文章是对JavaScript禁止页面操作的示例代码进行了介绍,需要的朋友可以过来参考下,希望对大家有所帮助 单的JS禁止页面右键菜单--避免网站信息被盗用  代码如下: <script type="text/javascript">   function block(oEvent){    if(window.event)     oEvent=window.event;    if(oEvent.button==2)     alert("鼠标右键不可用&

JavaScript中removeChild 方法开发示例代码_javascript技巧

1. 概述 删除后的节点虽然不在文档树中了,但其实它还在内存中,可以随时再次被添加到别的位置. 当你遍历一个父节点的子节点并进行删除操作时,要注意,children属性是一个只读属性,并且它在子节点变化时会实时更新 // 拿到待删除节点: var self = document.getElementById('to-be-removed'); // 拿到父节点: var parent = self.parentElement; // 删除: var removed = parent.remove

Android中imageView图片放大缩小及旋转功能示例代码

一.简介 二.方法 1)设置图片放大缩小效果 第一步:将<ImageView>标签中的android:scaleType设置为"fitCenter" android:scaleType="fitCenter" 第二步:获取屏幕的宽度 DisplayMetrics dm=new DisplayMetrics(); getWindowManager().getDefaultDisplay().getMetrics(dm); dm.widthPixels 第三

Asp.net 2.0 C#实现压缩/解压功能 (示例代码下载)

asp.net|示例|下载|压缩 (一). 实现功能    对文件及目录的压缩及解压功能(二). 运行图片示例  (三).代码    1. 压缩类     1/**//// <summary>  2/// 压缩类  3/// </summary>  4public class ZipClass  5{     6    public static void ZipFile(string FileToZip, string ZipedFile, int CompressionLeve

Javascript 修改String 对象 增加去除空格功能(示例代码)_javascript技巧

复制代码 代码如下: //#region 去除空格String.prototype.Trim = function () {    return this.replace(/(^\s*)|(\s*$)/g, "");} String.prototype.LTrim = function () {    return this.replace(/(^\s*)/g, "");} String.prototype.RTrim = function () {    retu

JavaScript将相对地址转换为绝对地址示例代码

本文为大家详细介绍下JavaScript怎么将相对地址转换为绝对地址,具体的示例如下,感兴趣的朋友可以参考下哈,希望对大家有所帮助   在看LABjs源代码时,发现里面有个将相对地址转为绝对地址的函数,将其拿出纪录如下: 复制代码 代码如下: function canonical_uri(src, base_path) { var root_page = /^[^?#]*//.exec(location.href)[0], root_domain = /^w+:///?[^/]+/.exec(r

javascript中字符串的定义示例代码

 javascript中字符串如何定义,下面有个不错的示例,大家可以学习下  代码如下: <html>  <head>  <title>javascript中字符串的定义</title>  <script>  //定义字符串  //第一种  var str = new Array();  alert(str);//空字符  //第二种  var str2 = new Array("hello");  alert(str2);/

JavaScript 继承详解及示例代码_javascript技巧

有些知识当时实在看不懂的话,可以先暂且放下,留在以后再看也许就能看懂了. 几个月前,抱着<JavaScript 高级程序设计(第三版)>,啃完创建对象,就开始啃起了 继承 ,然而啃完 原型链 就实在是看不下去了,脑子越来越乱,然后就把它扔一边了,继续看后面的.现在利用这个暑假搞懂了这个继承,就把笔记整理一下啦. 原型链(Prototype Chaining) 先看一篇文章,文章作者讲的非常不错,并且还配高清套图哦.lol- 链接: [学习笔记] 小角度看JS原型链 从原文中小摘几句 构造函数通