用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 相关文章推荐
js中各浏览器中鼠标按键值的差异
Apr 07 Javascript
js/jquery获取浏览器窗口可视区域高度和宽度以及滚动条高度实现代码
Dec 17 Javascript
js给onclick事件赋值,动态传参数实例解说
Mar 28 Javascript
Node.js插件的正确编写方式
Aug 03 Javascript
基于javascript实现精确到毫秒的倒计时限时抢购
Apr 17 Javascript
AngularJS变量及过滤器Filter用法分析
Nov 22 Javascript
非常优秀的JS图片轮播插件Swiper的用法
Jan 03 Javascript
Vue.js结合bootstrap实现分页控件
Mar 10 Javascript
vue组件如何被其他项目引用
Apr 13 Javascript
在Vue组件上动态添加和删除属性方法
Feb 23 Javascript
Vue基础配置讲解
Nov 29 Javascript
Ant Design的Table组件去除
Oct 24 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 strcmp使用说明
2010/04/22 PHP
字母顺序颠倒而单词顺序不变的php代码
2010/08/08 PHP
九个你必须知道而且又很好用的php函数和特点
2013/08/08 PHP
Symfony核心类概述
2016/03/17 PHP
js滚动条回到顶部的代码
2011/12/06 Javascript
js检查页面上有无重复id的实现代码
2013/07/17 Javascript
jQuery选择器源码解读(一):Sizzle方法
2015/03/31 Javascript
浅谈jquery中delegate()与live()
2015/06/22 Javascript
jQuery增加自定义函数的方法
2015/07/18 Javascript
基于Jquery和CSS3制作数字时钟附源码下载(CSS3篇)
2015/11/24 Javascript
剖析Node.js异步编程中的回调与代码设计模式
2016/02/16 Javascript
javascript中使用未定义变量或值的情况分析
2016/07/19 Javascript
AngularJS入门教程之ng-checked 指令详解
2016/08/01 Javascript
electron + vue项目实现打印小票功能及实现代码
2018/11/25 Javascript
vue flex 布局实现div均分自动换行的示例代码
2020/08/05 Javascript
vue3自定义dialog、modal组件的方法
2021/01/04 Vue.js
[03:11]不朽宝藏三外观展示
2020/09/18 DOTA
python模拟登录百度代码分享(获取百度贴吧等级)
2013/12/27 Python
简单的连接MySQL与Python的Bottle框架的方法
2015/04/30 Python
python对配置文件.ini进行增删改查操作的方法示例
2017/07/28 Python
解决PyCharm控制台输出乱码的问题
2019/01/16 Python
Python3.5内置模块之shelve模块、xml模块、configparser模块、hashlib、hmac模块用法分析
2019/04/27 Python
如何使用Python自动控制windows桌面
2019/07/11 Python
图文详解Django使用Pycharm连接MySQL数据库
2019/08/09 Python
Python面向对象原理与基础语法详解
2020/01/02 Python
基于Python的Jenkins的二次开发操作
2020/05/12 Python
简单掌握CSS3中resize属性的用法
2016/04/01 HTML / CSS
沙特阿拉伯网上购物:Sayidaty Mall
2018/05/06 全球购物
技术总监个人的自我评价范文
2013/12/18 职场文书
优秀党支部事迹材料
2014/01/14 职场文书
社区十八大感言
2014/01/19 职场文书
高一数学教学反思
2014/02/07 职场文书
庆祝三八妇女节标语
2014/10/09 职场文书
2015年清明节演讲稿范文
2015/03/17 职场文书
保护环境建议书作文500字
2015/09/14 职场文书
2016国庆促销广告语
2016/01/28 职场文书