用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的闭包详解
Dec 26 Javascript
浅谈JSON.parse()和JSON.stringify()
Jul 14 Javascript
简述Matlab中size()函数的用法
Mar 20 Javascript
jQuery实现导航滚动到指定内容效果完整实例【附demo源码下载】
Sep 20 Javascript
jquery自定义表单验证插件
Oct 12 Javascript
javascript  删除select中的所有option的实例
Sep 17 Javascript
input 标签实现输入框带提示文字效果(两种方法)
Oct 09 Javascript
js实现无缝滚动双图切换效果
Jul 09 Javascript
Javascript实现html转pdf高清版(提高分辨率)
Feb 19 Javascript
小程序跳转到的H5页面再跳转回跳小程序的方法
Mar 06 Javascript
JavaScript设计模式--简单工厂模式实例分析【XHR工厂案例】
May 23 Javascript
vue实现一个获取按键展示快捷键效果的Input组件
Jan 13 Vue.js
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中几个可以提高运行效率的代码写法、技巧分享
2014/08/21 PHP
php下Memcached入门实例解析
2015/01/05 PHP
php从数据库查询结果生成树形列表的方法
2015/04/17 PHP
CodeIgniter框架钩子机制实现方法【hooks类】
2018/08/21 PHP
基于JQuery的数字改变的动画效果--可用来做计数器
2010/08/11 Javascript
分享一个自己动手写的jQuery分页插件
2014/08/28 Javascript
jQuery基础知识点总结(必看)
2016/05/31 Javascript
js控住DOM实现发布微博效果
2016/08/30 Javascript
jQuery zTree树插件简单使用教程
2017/01/10 Javascript
关于javascript sort()排序你可能忽略的一点理解
2017/07/18 Javascript
从对象列表中获取一个对象的方法,依据关键字和值
2017/09/20 Javascript
详解html-webpack-plugin用法全解
2018/01/22 Javascript
详解如何使用nvm管理Node.js多版本
2019/05/06 Javascript
vue使用localStorage保存登录信息 适用于移动端、PC端
2019/05/27 Javascript
vue实现吸顶、锚点和滚动高亮按钮效果
2019/10/21 Javascript
使用axios请求时,发送formData请求的示例
2019/10/29 Javascript
[03:03]2014DOTA2国际邀请赛 EG战队专访
2014/07/12 DOTA
Python 执行字符串表达式函数(eval exec execfile)
2014/08/11 Python
Python3实现连接SQLite数据库的方法
2014/08/23 Python
python getopt详解及简单实例
2016/12/30 Python
Scrapy-redis爬虫分布式爬取的分析和实现
2017/02/07 Python
python实现mysql的读写分离及负载均衡
2018/02/04 Python
python如何将多个PDF进行合并
2019/08/13 Python
Sublime Text3最新激活注册码分享适用2020最新版 亲测可用
2020/11/12 Python
Python爬虫之App爬虫视频下载的实现
2020/12/08 Python
HTML5去掉输入框type为number时的上下箭头的实现方法
2020/01/03 HTML / CSS
高街生活方式全球在线商店:AZBRO
2017/08/26 全球购物
什么是设计模式
2012/06/17 面试题
高三学生评语大全
2014/04/25 职场文书
连带责任保证书
2014/04/29 职场文书
小学雷锋月活动总结
2014/07/03 职场文书
学校教师师德师风承诺书
2015/04/28 职场文书
因家庭原因离职的辞职信范文
2015/05/12 职场文书
2016年“5.12”国际护士节活动总结
2016/04/06 职场文书
Django + Taro 前后端分离项目实现企业微信登录功能
2022/04/07 Python
python实现学员管理系统(面向对象版)
2022/06/05 Python