用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.The.Good.Parts阅读笔记(一)假值与===运算符
Nov 16 Javascript
JavaScript中利用jQuery绑定事件的几种方式小结
Mar 06 Javascript
js放大镜放大购物图片效果
Jan 18 Javascript
利用Vue v-model实现一个自定义的表单组件
Apr 27 Javascript
详解微信小程序设置底部导航栏目方法
Jun 29 Javascript
JavaScript编写的网页小游戏,很给力
Aug 18 Javascript
js中的闭包学习心得
Feb 06 Javascript
Egg.js 中 AJax 上传文件获取参数的方法
Oct 10 Javascript
微信小程序配置服务器提示验证token失败的解决方法
Apr 03 Javascript
node.js的http.createServer过程深入解析
Jun 06 Javascript
javascript使用链接跨域下载图片
Nov 01 Javascript
ant design 日期格式化的实现
Oct 27 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
完美解决phpexcel导出到xls文件出现乱码的问题
2016/10/29 PHP
在云虚拟主机部署thinkphp5项目的步骤详解
2017/12/21 PHP
PHP的mysqli_rollback()函数讲解
2019/01/23 PHP
PHP PDOStatement::getAttribute讲解
2019/02/01 PHP
php解决安全问题的方法实例
2019/09/19 PHP
laravel 输出最后执行sql 附:whereIn的使用方法
2019/10/10 PHP
web 页面分页打印的实现
2009/06/22 Javascript
JavaScript 高效运行代码分析
2010/03/18 Javascript
JavaScript获取Url里的参数
2014/12/18 Javascript
jQuery实现的经典竖向伸缩菜单效果代码
2015/09/24 Javascript
同步异步动态引入js文件的几种方法总结
2016/09/23 Javascript
AngularJS实现自定义指令与控制器数据交互的方法示例
2017/06/19 Javascript
Vue中使用的EventBus有生命周期
2018/07/12 Javascript
vue登录注册实例详解
2019/09/14 Javascript
jQuery实现的图片点击放大缩小功能案例
2020/01/02 jQuery
一文读懂vue动态属性数据绑定(v-bind指令)
2020/07/20 Javascript
[04:09]显微镜下的DOTA2第十二期—NaVi美如画的团战
2014/06/23 DOTA
python with提前退出遇到的坑与解决方案
2018/01/05 Python
python实现对输入的密文加密
2019/03/20 Python
Python获取基金网站网页内容、使用BeautifulSoup库分析html操作示例
2019/06/04 Python
python 机器学习之支持向量机非线性回归SVR模型
2019/06/26 Python
python3 批量获取对应端口服务的实例
2019/07/25 Python
如何实现Django Rest framework版本控制
2019/07/25 Python
Python 可视化神器Plotly详解
2020/12/26 Python
python实现录制全屏和选择区域录屏功能
2021/02/05 Python
canvas压缩图片以及卡片制作的方法示例
2018/12/04 HTML / CSS
Aveda美国官网:天然护发产品、洗发水、护发素和沙龙
2016/12/09 全球购物
意大利在线药房:shop-farmacia.it
2019/03/12 全球购物
JENNIFER BEHR官网:各种耳环和发饰
2020/06/07 全球购物
零件设计自荐信范文
2013/11/27 职场文书
行政部主管岗位职责
2013/12/28 职场文书
会计专业自荐信
2014/06/03 职场文书
白鹤梁导游词
2015/02/06 职场文书
2015年建筑工程工作总结
2015/05/13 职场文书
用Python爬虫破解滑动验证码的案例解析
2021/05/06 Python
Ruby处理YAML和json数据
2022/04/18 Ruby