用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 相关文章推荐
showModelessDialog()使用详解
Sep 07 Javascript
AeroWindow 基于JQuery的弹出窗口插件
Jun 27 Javascript
js获取电脑分辨率的思路及操作
Nov 22 Javascript
jquery制作漂亮的弹出层提示消息特效
Dec 23 Javascript
js判断登录与否并确定跳转页面的方法
Jan 30 Javascript
jquery实现表格隔行换色效果
Nov 19 Javascript
Vue.js动态组件解析
Sep 09 Javascript
ES6数组的扩展详解
Apr 25 Javascript
微信小程序url与token设置详解
Sep 26 Javascript
javaScript实现鼠标在文字上悬浮时弹出悬浮层效果
Apr 12 Javascript
jquery ajax加载数据前台渲染方式 不用for遍历的方法
Aug 09 jQuery
基于JavaScript实现一个简单的Vue
Sep 26 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
基于curl数据采集之单页面并行采集函数get_htmls的使用
2013/04/28 PHP
CURL的学习和应用(附多线程实现)
2013/06/03 PHP
PHP的Yii框架中移除组件所绑定的行为的方法
2016/03/18 PHP
Yii2 rbac权限控制操作步骤实例教程
2016/04/29 PHP
javascript 浏览器判断 绑定事件 arguments 转换数组 数组遍历
2009/07/06 Javascript
jquery固定底网站底部菜单效果
2013/08/13 Javascript
php析构函数的具体用法小结
2014/03/11 Javascript
关于JavaScript命名空间的一些心得
2014/06/07 Javascript
jQuery的load()方法及其回调函数用法实例
2015/03/25 Javascript
详解Webwork中Action 调用的方法
2016/02/02 Javascript
Bootstrap入门书籍之(一)排版
2016/02/17 Javascript
js获取新浪天气接口的实现代码
2016/06/06 Javascript
jQuery+Pdo编写login登陆界面
2016/08/01 Javascript
js 模仿锚点定位的实现方法
2016/11/19 Javascript
node+experss实现爬取电影天堂爬虫
2016/11/20 Javascript
js制作可以延时消失的菜单
2017/01/13 Javascript
Vue.js实现按钮的动态绑定效果及实现代码
2017/08/21 Javascript
简单谈谈vue的过渡动画(推荐)
2017/10/11 Javascript
详解Webpack多环境代码打包的方法
2018/08/03 Javascript
微信小程序用户位置权限的获取方法(拒绝后提醒)
2018/11/15 Javascript
Jquery异步上传文件代码实例
2019/11/13 jQuery
理解Python中的With语句
2016/03/18 Python
浅谈python抛出异常、自定义异常, 传递异常
2016/06/20 Python
深入理解Python中range和xrange的区别
2017/11/26 Python
Python3使用TCP编写一个简易的文件下载器功能
2019/05/08 Python
python pytest进阶之xunit fixture详解
2019/06/27 Python
关于PyTorch 自动求导机制详解
2019/08/18 Python
python3使用Pillow、tesseract-ocr与pytesseract模块的图片识别的方法
2020/02/26 Python
详解用Python调用百度地图正/逆地理编码API
2020/07/02 Python
linux系统下pip升级报错的解决方法
2021/01/31 Python
WatchShop法国:英国排名第一的独立手表零售商
2020/02/17 全球购物
高考自主招生自荐信
2013/10/20 职场文书
中学生自我评价范文
2014/02/08 职场文书
教师党员批评与自我批评发言稿
2014/10/15 职场文书
2014年党的群众路线学习心得体会
2014/11/05 职场文书
python实现Nao机器人的单目测距
2021/09/04 Python