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


Posted in Javascript onMarch 09, 2014

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的功能。
Javascript 相关文章推荐
JavaScript NodeTree导航栏(菜单项JSON类型/自制)
Feb 01 Javascript
jQuery图片的展开和收缩实现代码
Apr 16 Javascript
jQuery探测位置的提示弹窗(toolTip box)详细解析
Nov 14 Javascript
JavaScript中的typeof操作符用法实例
Apr 05 Javascript
JavaScript实现更改网页背景与字体颜色的方法
Feb 02 Javascript
jQuery实现不断闪烁文字的方法
May 15 Javascript
javascript解析xml实现省市县三级联动的方法
Jul 25 Javascript
浅谈jQuery中ajaxPrefilter的应用
Aug 01 Javascript
解析JavaScript数组方法reduce
Dec 12 Javascript
12个提高JavaScript技能的概念(小结)
May 09 Javascript
json解析大全 双引号、键值对不在一起的情况
Dec 06 Javascript
JS替换字符串中指定位置的字符(多种方法)
May 28 Javascript
jquery下div 的resize事件示例代码
Mar 09 #Javascript
现如今最流行的JavaScript代码规范
Mar 08 #Javascript
Jquery实现点击按钮,连续地向textarea中添加值的实例代码
Mar 08 #Javascript
js中的onchange和onpropertychange (onchange无效的解决方法)
Mar 08 #Javascript
JS实现鼠标单击与双击事件共存
Mar 08 #Javascript
js触发onchange事件的方法说明
Mar 08 #Javascript
关于onchange事件在IE和FF下的表现及解决方法
Mar 08 #Javascript
You might like
php 字符串函数收集
2010/03/29 PHP
php使用百度ping服务代码实例
2014/06/19 PHP
PHP采用get获取url汉字出现乱码的解决方法
2014/11/13 PHP
解决form中action属性后面?传递参数 获取不到的问题
2017/07/21 PHP
Javascript 布尔型分析
2008/12/22 Javascript
jQuery 判断元素上是否绑定了事件
2009/10/28 Javascript
JavaScript获取FCK编辑器信息的具体方法
2013/07/12 Javascript
javascript搜索框效果实现方法
2015/05/14 Javascript
浅谈bootstrap源码分析之tab(选项卡)
2016/06/06 Javascript
基于css3新属性transform及原生js实现鼠标拖动3d立方体旋转
2016/06/12 Javascript
清除浏览器缓存的几种方法总结(必看)
2016/12/09 Javascript
JavaScript中数组Array方法详解
2017/02/27 Javascript
纯js的右下角弹窗实例
2017/03/12 Javascript
微信小程序 flex实现导航实例详解
2017/04/26 Javascript
jQuery 实现批量提交表格多行数据的方法
2018/08/09 jQuery
基于JavaScript的数据结构队列动画实现示例解析
2020/08/06 Javascript
js实现右键弹出自定义菜单
2020/09/08 Javascript
JS实现页面侧边栏效果探究
2021/01/08 Javascript
mac在matplotlib中显示中文的操作方法
2020/03/06 Python
Python面向对象程序设计之私有变量,私有方法原理与用法分析
2020/03/23 Python
解决keras,val_categorical_accuracy:,0.0000e+00问题
2020/07/02 Python
Jupyter安装拓展nbextensions及解决官网下载慢的问题
2021/03/03 Python
Html5 web本地存储实例详解
2016/07/28 HTML / CSS
Discard Protocol抛弃协议的作用是什么
2015/10/10 面试题
盛大二次面试题
2016/11/18 面试题
优秀的茶餐厅创业计划书
2014/01/03 职场文书
数控技术专业毕业自荐书范文
2014/02/05 职场文书
企业金融服务方案
2014/06/03 职场文书
教室标语大全
2014/06/21 职场文书
教书育人演讲稿
2014/09/11 职场文书
2014年教师个人工作总结
2014/11/10 职场文书
单位婚育证明范本
2014/11/21 职场文书
公务员年度考核登记表个人总结
2015/02/12 职场文书
二婚主持词
2015/06/30 职场文书
Redis5之后版本的高可用集群搭建的实现
2021/04/27 Redis
Python爬虫之自动爬取某车之家各车销售数据
2021/06/02 Python