用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 DIV弹出效果实现代码
Jul 03 Javascript
一个XML格式数据转换为图表的例子
Feb 09 Javascript
js中document.getElementByid、document.all和document.layers区分介绍
Dec 08 Javascript
Google的跟踪代码 动态加载js代码方法应用
Nov 12 Javascript
Javascript数组与字典用法分析
Dec 13 Javascript
javascript实现复选框超过限制即弹出警告框的方法
Feb 25 Javascript
jQuery检查事件是否触发的方法
Jun 26 Javascript
js实现对ajax请求面向对象的封装
Jan 08 Javascript
解析JavaScript模仿块级作用域
Dec 29 Javascript
webpack中如何加载静态文件的方法步骤
May 18 Javascript
Vue 中如何将函数作为 props 传递给组件的实现代码
May 12 Javascript
jQuery实现简单全选框
Sep 13 jQuery
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代码
2006/12/06 PHP
php empty,isset,is_null判断比较(差异与异同)
2010/10/19 PHP
PHP文件操作之获取目录下文件与计算相对路径的方法
2016/01/08 PHP
php框架CodeIgniter主从数据库配置方法分析
2018/05/25 PHP
PHP应用跨时区功能的实现方法
2019/03/21 PHP
gearman中任务的优先级和返回状态实例分析
2020/02/27 PHP
phpStorm2020 注册码
2020/09/17 PHP
js过滤数组重复元素的方法
2010/09/05 Javascript
JQuery入门——移除绑定事件unbind方法概述及应用
2013/02/05 Javascript
js 通过html()及text()方法获取并设置p标签的显示值
2014/05/14 Javascript
JS实现让网页背景图片斜向移动的方法
2015/02/25 Javascript
JavaScript实现的一个倒计时的类
2015/03/12 Javascript
json格式数据的添加,删除及排序方法
2016/01/21 Javascript
jQuery查找节点并获取节点属性的方法
2016/09/09 Javascript
AngularJS改变元素显示状态
2017/04/20 Javascript
在Vue项目中使用d3.js的实例代码
2018/05/01 Javascript
深入浅析AngularJs模版与v-bind
2018/07/06 Javascript
vue组件创建的三种方式小结
2020/02/03 Javascript
vue更改数组中的值实例代码详解
2020/02/07 Javascript
python数据结构之链表的实例讲解
2017/07/25 Python
对Python2与Python3中__bool__方法的差异详解
2018/11/01 Python
TensorFlow查看输入节点和输出节点名称方式
2020/01/04 Python
Python将list元素转存为CSV文件的实现
2020/11/16 Python
Champion官网:美国冠军运动服装
2017/01/25 全球购物
美国最好的钓鱼、狩猎和划船装备商店:Bass Pro Shops
2018/12/02 全球购物
英国设计的甲板鞋和船鞋:Chatham
2018/12/06 全球购物
英国在线定做百叶窗网站:Make My Blinds
2020/08/17 全球购物
Weblogic的布署方式
2013/08/23 面试题
运动会广播稿诗歌版
2014/09/12 职场文书
党的群众路线教育实践活动总结
2014/10/30 职场文书
2015年司法所工作总结
2015/04/27 职场文书
2015年乡镇平安建设工作总结
2015/05/13 职场文书
升学宴学生致辞
2015/07/27 职场文书
大学社团活动总结怎么写
2019/06/21 职场文书
pdf论文中python画的图Type 3 fonts字体不兼容的解决方案
2021/04/24 Python
MySQL 数据类型详情
2021/11/11 MySQL