用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 相关文章推荐
StringTemplate遇见jQuery冲突的解决方法
Sep 22 Javascript
js和jquery中循环的退出和继续下一个循环
Sep 03 Javascript
jQuery带箭头提示框tooltips插件集锦
Nov 17 Javascript
jquery 操作css样式、位置、尺寸方法汇总
Nov 28 Javascript
TinyMCE提交AjaxForm获取不到数据的解决方法
Mar 05 Javascript
javascript 数组的定义和数组的长度
Jun 07 Javascript
AngularJs Injecting Services Into Controllers详解
Sep 02 Javascript
javascript 使用正则test( )第一次是 true,第二次是false
Feb 22 Javascript
走进javascript——不起眼的基础,值和分号
Feb 24 Javascript
JavaScript闭包和回调详解
Aug 09 Javascript
Angular8基础应用之表单及其验证
Aug 11 Javascript
vue项目中企业微信使用js-sdk时config和agentConfig配置方式详解
Dec 15 Vue.js
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
ThinkPHP的Widget扩展实例
2014/06/19 PHP
分享常见的几种页面静态化的方法
2015/01/08 PHP
PHP 实现 WebSocket 协议原理与应用详解
2020/04/22 PHP
用js脚本控制asp.net下treeview的NodeCheck的实现代码
2010/03/02 Javascript
JS学习之一个简易的日历控件
2010/03/24 Javascript
js网页侧边随页面滚动广告效果实现
2011/04/14 Javascript
仅IE不支持setTimeout/setInterval函数的第三个以上参数
2011/05/25 Javascript
js实现动态添加、删除行、onkeyup表格求和示例
2013/08/18 Javascript
JQuery自适应窗口大小导航菜单附源码下载
2015/09/01 Javascript
JS实现太极旋转思路分析
2016/12/09 Javascript
jQuery实现选项卡功能(两种方法)
2017/03/08 Javascript
JS+HTML+CSS实现轮播效果
2017/11/28 Javascript
微信小程序实现流程进度的图样式功能
2018/01/16 Javascript
python求pi的方法
2014/10/08 Python
Python判断操作系统类型代码分享
2014/11/22 Python
python3抓取中文网页的方法
2015/07/28 Python
python3使用PyMysql连接mysql数据库实例
2017/02/07 Python
Python中动态创建类实例的方法
2017/03/24 Python
Pandas:DataFrame对象的基础操作方法
2018/06/07 Python
Python 按字典dict的键排序,并取出相应的键值放于list中的实例
2019/02/12 Python
python实现车牌识别的示例代码
2019/08/05 Python
python tkinter组件使用详解
2019/09/16 Python
python实现udp传输图片功能
2020/03/20 Python
基于Python+QT的gui程序开发实现
2020/07/03 Python
详解python命令提示符窗口下如何运行python脚本
2020/09/11 Python
改变 Python 中线程执行顺序的方法
2020/09/24 Python
浅谈CSS3特性查询(Feature Query: @supports)功能简介
2017/07/31 HTML / CSS
详解移动端HTML5页面端去掉input输入框的白色背景和边框(兼容Android和ios)
2016/12/15 HTML / CSS
快餐店的创业计划书范文
2014/01/29 职场文书
求职自荐信怎么写
2014/03/06 职场文书
开发房地产协议书
2014/09/14 职场文书
大学校园餐饮创业计划书
2019/08/07 职场文书
jQuery ajax - getScript() 方法和getJSON方法
2021/05/14 jQuery
php将xml转化对象的实例详解
2021/11/17 PHP
PostgreSQL并行计算算法及参数强制并行度设置方法
2022/04/06 PostgreSQL
MySQL 执行数据库更新update操作的时候数据库卡死了
2022/05/02 MySQL