用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 相关文章推荐
加速IE的Javascript document输出的方法
Dec 02 Javascript
JavaScript判断用户是否对表单进行了修改的方法
Mar 18 Javascript
浅谈JS的基础类型与引用类型
Sep 13 Javascript
JSONP跨域请求
Mar 02 Javascript
Angular2关于@angular/cli默认端口号配置的问题
Jul 15 Javascript
JavaScript 用fetch 实现异步下载文件功能
Jul 21 Javascript
Jquery动态列功能完整实例
Aug 30 jQuery
微信小程序自定义头部导航栏(组件化)
Nov 15 Javascript
vue远程加载sfc组件思路详解
Dec 25 Javascript
Vue-resource安装过程及使用方法解析
Jul 21 Javascript
Openlayers实现图形绘制
Sep 28 Javascript
Node实现搜索框进行模糊查询
Jun 28 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
《DOTA3》开发工作已经开始 《DOTA3》将代替《DOTA2》
2021/03/06 DOTA
php下实现农历日历的代码
2007/03/07 PHP
php判断字符以及字符串的包含方法属性
2008/08/30 PHP
javascript打印大全(打印页面设置/打印预览代码)
2013/03/29 Javascript
JS,Jquery获取select,dropdownlist,checkbox下拉列表框的值(示例代码)
2014/01/11 Javascript
Node.js实现的简易网页抓取功能示例
2014/12/05 Javascript
PHPExcel中的一些常用方法汇总
2015/01/23 Javascript
js库Modernizr的介绍和使用
2015/05/07 Javascript
jquery实现简单实用的打分程序实例
2015/07/23 Javascript
深入学习JavaScript对象
2015/10/13 Javascript
javascript的BOM
2016/05/03 Javascript
JS实现二叉查找树的建立以及一些遍历方法实现
2017/04/17 Javascript
AngularJS 支付倒计时功能实现思路
2017/06/05 Javascript
AngularJs用户输入动态模板XSS攻击示例详解
2018/04/21 Javascript
Hexo已经看腻了,来手把手教你使用VuePress搭建个人博客
2018/04/26 Javascript
nodejs取得当前执行路径的方法
2018/05/13 NodeJs
vue绑定事件后获取绑定事件中的this方法
2018/09/15 Javascript
angularjs手动识别字符串中的换行符方法
2018/10/02 Javascript
详解Vue调用手机相机和相册以及上传
2019/05/05 Javascript
解决jquery validate 验证不通过后验证正确的信息仍残留在label上的方法
2019/08/27 jQuery
一次微信小程序内地图的使用实战记录
2019/09/09 Javascript
使用Webpack提升Vue.js应用程序的4种方法(翻译)
2019/10/09 Javascript
详解datagrid使用方法(重要)
2020/11/06 Javascript
Vue中使用JsonView来展示Json树的实例代码
2020/11/16 Javascript
python使用PIL给图片添加文字生成海报示例
2018/08/17 Python
浅析matlab中imadjust函数
2020/02/27 Python
Python爬虫爬取微博热搜保存为 Markdown 文件的源码
2021/02/22 Python
英国最大的在线时尚眼镜店:Eyewearbrands
2019/03/12 全球购物
Book Depository亚太地区:一家领先的国际图书零售商
2019/05/05 全球购物
优秀的自荐信要注意哪些
2014/01/03 职场文书
篮球比赛策划方案
2014/06/05 职场文书
欢迎领导标语
2014/06/27 职场文书
2014年团委工作总结
2014/11/13 职场文书
学生自我评语
2015/01/04 职场文书
民事起诉状范文
2015/05/19 职场文书
如何开发一个渐进式Web应用程序PWA
2021/05/10 Javascript