用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 相关文章推荐
js 页面输出值
Nov 30 Javascript
JSONP 跨域共享信息
Aug 16 Javascript
JavaScript字符串String和Array操作的有趣方法
Dec 18 Javascript
Node.js编码规范
Jul 14 Javascript
JQuery中的事件及动画用法实例
Jan 26 Javascript
jQuery插件PageSlide实现左右侧栏导航菜单
Apr 12 Javascript
js实现仿阿里巴巴城市选择框效果实例
Jun 24 Javascript
Angular.js中$resource高大上的数据交互详解
Jul 30 Javascript
JavaScript获取tr td 的三种方式全面总结(推荐)
Aug 15 Javascript
微信小程序使用Socket的实例
Sep 19 Javascript
基于jQuery实现的设置文本区域的光标位置
Jun 15 jQuery
vue实现form表单与table表格的数据关联功能示例
Jan 29 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+MySQL的聊天室设计
2006/10/09 PHP
JS实现php的伪分页
2008/05/25 PHP
php表单转换textarea换行符的方法
2010/09/10 PHP
PHP测试成功的邮件发送案例
2015/10/26 PHP
SyntaxHighlighter代码加色使用方法
2008/09/07 Javascript
JavaScript CSS修改学习第三章 修改样式表
2010/02/19 Javascript
写给想学习Javascript的朋友一点学习经验小结
2010/11/23 Javascript
Javascript的各种节点操作实例演示代码
2012/06/27 Javascript
js实现点小图看大图效果的思路及示例代码
2013/10/28 Javascript
分享9个最好用的JavaScript开发工具和代码编辑器
2015/03/24 Javascript
浅谈Javascript线程及定时机制
2015/07/02 Javascript
Nodejs抓取html页面内容(推荐)
2016/08/11 NodeJs
jQuery动态创建元素以及追加节点的实现方法
2016/10/20 Javascript
canvas实现图像截取功能
2017/02/06 Javascript
js实现做通讯录的索引滑动显示效果和滑动显示锚点效果
2017/02/18 Javascript
深入理解Javascript中的观察者模式
2017/02/20 Javascript
jQuery插件HighCharts绘制的基本折线图效果示例【附demo源码下载】
2017/03/07 Javascript
从零开始学习Node.js系列教程之设置HTTP头的方法示例
2017/04/13 Javascript
vue子组件使用自定义事件向父组件传递数据
2017/05/27 Javascript
解决vue单页使用keep-alive页面返回不刷新的问题
2018/03/13 Javascript
基于vue.js实现的分页
2018/03/13 Javascript
详解jQuery如何实现模糊搜索
2019/05/10 jQuery
Vue3项目打包后部署到服务器 请求不到后台接口解决方法
2020/02/06 Javascript
JS hasOwnProperty()方法检测一个属性是否是对象的自有属性的方法
2021/01/29 Javascript
Python+selenium实现截图图片并保存截取的图片
2018/01/05 Python
解决Python3.5+OpenCV3.2读取图像的问题
2018/12/05 Python
学python安装的软件总结
2019/10/12 Python
Python3实现飞机大战游戏
2020/04/24 Python
Python datetime 如何处理时区信息
2020/09/02 Python
BLACKMORES澳洲官网:澳大利亚排名第一的保健品牌
2018/09/27 全球购物
ShellScript面试题一则-ShellScript编程
2014/06/24 面试题
2014年基层党支部工作总结
2014/12/04 职场文书
总经理司机岗位职责
2015/04/10 职场文书
上课迟到检讨书范文
2015/05/06 职场文书
工作后的感想
2015/08/07 职场文书
Mysql 文件配置解析介绍
2022/05/06 MySQL