用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 text()要注意啦
Oct 30 Javascript
Extjs中使用extend(js继承) 的代码
Mar 15 Javascript
JavaScript高级程序设计 阅读笔记(十三) js定义类或对象
Aug 14 Javascript
jQuery动态背景图片效果实现方法
Jul 03 Javascript
JavaScript 七大技巧(一)
Dec 13 Javascript
jQuery获取父元素及父节点的方法小结
Apr 14 Javascript
JS实现仿百度文库评分功能
Jan 12 Javascript
js实现手机拍照上传功能
Jan 17 Javascript
vue 数组和对象不能直接赋值情况和解决方法(推荐)
Oct 25 Javascript
JavaScript提升机制Hoisting详解
Oct 23 Javascript
vue $set 给数据赋值的实例
Nov 09 Javascript
js中!和!!的区别与用法
May 09 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
PHILIPS L4X25T电路分析和打理
2021/03/02 无线电
mysql_fetch_row,mysql_fetch_array,mysql_fetch_assoc的区别
2009/04/24 PHP
在Windows下编译适用于PHP 5.2.12及5.2.13的eAccelerator.dll(附下载)
2010/05/04 PHP
PHP遍历目录并返回统计目录大小
2014/06/09 PHP
php中动态调用函数的方法
2015/03/16 PHP
thinkphp3.2中Lite文件替换框架入口文件或应用入口文件的方法
2015/05/21 PHP
PHP实现简单实用的分页类代码
2016/04/08 PHP
Laravel中10个有用的用法小结
2019/05/06 PHP
PHP使用openssl扩展实现加解密方法示例
2020/02/20 PHP
发布一个基于javascript的动画类 Fx.js
2010/11/05 Javascript
在vs2010中调试javascript代码方法
2011/02/11 Javascript
javascript 使用 NodeList需要注意的问题
2013/03/04 Javascript
JS中图片缓冲loading技术的实例代码
2013/08/29 Javascript
JavaScript实现单击下拉框选择直接跳转页面的方法
2015/07/02 Javascript
如何在JS中实现相互转换XML和JSON
2016/07/19 Javascript
ES6中Symbol类型用法实例详解
2017/04/06 Javascript
JS实现搜索关键词的智能提示功能
2017/07/07 Javascript
html中通过JS获取JSON数据并加载的方法
2017/11/30 Javascript
微信小程序slider组件使用详解
2018/01/31 Javascript
JS实现点餐自动选择框(案例分析)
2019/12/10 Javascript
微信小程序登陆注册功能的实现代码
2019/12/10 Javascript
JS前端基于canvas给图片添加水印
2020/11/11 Javascript
[01:09:10]NB vs Liquid Supermajor小组赛 A组胜者组决赛 BO3 第一场 6.2
2018/06/04 DOTA
python基础教程之popen函数操作其它程序的输入和输出示例
2014/02/10 Python
浅谈终端直接执行py文件,不需要python命令
2017/01/23 Python
使用Python和xlwt向Excel文件中写入中文的实例
2018/04/21 Python
python 实现兔子生兔子示例
2019/11/21 Python
python的flask框架难学吗
2020/07/31 Python
Django REST Framework 分页(Pagination)详解
2020/11/30 Python
奥地利顶级内衣丝袜品牌英国站:Wolford英国
2016/08/29 全球购物
护理学毕业生自荐信
2013/10/02 职场文书
商务日语专业毕业生求职信
2013/10/26 职场文书
计算机软件个人的自荐信范文
2013/12/01 职场文书
暑期实践思想汇报
2014/01/06 职场文书
六五普法规划实施方案
2014/03/21 职场文书
推荐信模板
2014/05/09 职场文书