用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 相关文章推荐
jQuery 操作下拉列表框实现代码
Feb 22 Javascript
解析DHTML,JavaScript,DOM,BOM以及WEB标准的描述
Jun 19 Javascript
JavaScript版TAB选项卡效果实例
Aug 16 Javascript
JS 毫秒转时间示例代码
Sep 22 Javascript
把字符串按照特定的字母顺序进行排序的js代码
Jan 28 Javascript
JavaScript中伪协议 javascript:使用探讨
Jul 18 Javascript
JavaScript实现带箭头标识的多级下拉菜单效果
Aug 27 Javascript
js实现图片缓慢放大缩小效果
Aug 02 Javascript
关于Angularjs中自定义指令一些有价值的细节和技巧小结
Apr 22 Javascript
JavaScript实现表单注册、表单验证、运算符功能
Oct 15 Javascript
详解angular2 控制视图的封装模式
Dec 27 Javascript
微信小程序class封装http代码实例
Aug 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 strstr查找字符串中是否包含某些字符的查找函数
2010/06/03 PHP
php MessagePack介绍
2013/10/06 PHP
Yii中使用PHPExcel导出Excel的方法
2014/12/26 PHP
ThinkPHP路由详解
2015/07/27 PHP
ThinkPHP5&amp;5.1框架关联模型分页操作示例
2019/08/03 PHP
Display SQL Server Login Mode
2007/06/21 Javascript
JavaScript中的this实例分析
2011/04/28 Javascript
javascript中直接引用Microsoft的COM生成Word
2014/01/20 Javascript
Fullpage.js固定导航栏-实现定位导航栏
2016/03/17 Javascript
JQuery validate插件验证用户注册信息
2016/05/11 Javascript
详解JavaScript权威指南之对象
2016/09/27 Javascript
JavaScript实现自动切换图片代码
2016/10/11 Javascript
ajax实现加载页面、删除、查看详细信息 bootstrap美化页面!
2017/03/14 Javascript
解决vue打包之后静态资源图片失效的问题
2018/02/21 Javascript
js中DOM事件绑定分析
2018/03/18 Javascript
JavaScript数据结构与算法之二叉树遍历算法详解【先序、中序、后序】
2019/02/21 Javascript
jQuery中实现text()的方法
2019/04/04 jQuery
使用 Vue cli 3.0 构建自定义组件库的方法
2019/04/30 Javascript
微信小程序3D轮播实现代码
2019/09/19 Javascript
Python读取环境变量的方法和自定义类分享
2014/11/22 Python
Python实现的摇骰子猜大小功能小游戏示例
2017/12/18 Python
Python Scapy随心所欲研究TCP协议栈
2018/11/20 Python
Django unittest 设置跳过某些case的方法
2018/12/26 Python
python 实现在tkinter中动态显示label图片的方法
2019/06/13 Python
Python DataFrame一列拆成多列以及一行拆成多行
2019/08/06 Python
浅谈Django2.0 加xadmin踩的坑
2019/11/15 Python
基于virtualenv创建python虚拟环境过程图解
2020/03/30 Python
python 基于selenium实现鼠标拖拽功能
2020/12/24 Python
美国家居装饰和豪华家具购物网站:One Kings Lane
2018/12/24 全球购物
Hotels.com印度:酒店预订
2019/05/11 全球购物
战友聚会邀请函
2014/01/18 职场文书
《太阳》教学反思
2014/02/21 职场文书
2014年两会学习心得体会
2014/03/17 职场文书
西安大雁塔导游词
2015/02/10 职场文书
Python可视化动图组件ipyvizzu绘制惊艳的可视化动图
2022/04/21 Python
maven 解包依赖项中的文件的解决方法
2022/07/15 Java/Android