用JavaScript实现类似于ListBox功能示例代码

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的功能。

赞 (0)

相关推荐

  • JavaScript列表框listbox全选和反选的实现方法

    本文实例讲述了JavaScript列表框listbox全选和反选的实现方法.分享给大家供大家参考.具体分析如下: 通过JS代码对列表框进行全选和反选是经常要操作的,非常具有实用价值. function listboxSelectDeselect(listID, isSelect) { var listbox = document.getElementById(listID); for(var count=0; count < listbox.options.length; count++) {

  • JavaScript如何从listbox里同时删除多个项目

    要从列表框同时删除多个项目,我们不能从上到下的删除,因为上面的项目每删除一个,下面的项目的索引号就会变化,所以只能从下向上删除,这样就不会出现索引号乱变的问题了. html代码 复制代码 代码如下: <table> <tr> <td align="center"> <select id="lsbox" name="lsbox" size="10" multiple> <op

  • JS ListBox的简单功能实现代码

    JS ListBox的简单功能实现代码

    页面效果如下:代码也贴出来跟大家分享: 美元/英镑 美元/港币 美元/新加坡元 美元/日元 美元/加拿大元 美元/欧元 [Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]

  • 基于javascript实现listbox左右移动

    基于javascript实现listbox左右移动

    本文实例讲解了javascript实现listbox左右移动的详细代码,分享给大家供大家参考,具体内容如下 效果图: 具体代码: <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>listbox左右移动</title> </head> <body> &

  • 使用javascript实现ListBox左右全选,单选,多选,全请

    复制代码 代码如下: <html><head>    <meta http-equiv="Content-Type " content="text/html;   charset=gb2312 ">    <title>list测试</title></head><body>    <div style="font-size: 10pt;">      

  • JavaScript控制listbox列表框的项目上下移动的方法

    本文实例讲述了JavaScript控制listbox列表框的项目上下移动的方法.分享给大家供大家参考.具体分析如下: 这段JS代码可以控制listbox内的元素向上或者向下移动,这个功能非常有用.下面是详细的代码 复制代码 代码如下: function listbox_move(listID, direction) {     var listbox = document.getElementById(listID);     var selIndex = listbox.selectedInd

  • javascript实现listbox左右移动实现代码

    javascript实现listbox左右移动实现代码

    1. html部分: 复制代码 代码如下: <table cellSpacing="0" borderColorDark="#ffffff" cellPadding="3" width="460" align="left" borderColorLight="#000000" border="1"> <tr bgColor="#cccccc

  • js 获取Listbox选择的值的代码

    复制代码 代码如下: <script type="text/javascript"> function GetValue() { var strlist = document.getElementById("ListBox1");//获取Listbox var str= ""; //遍历Listbox,取得选中项的值 if (strlist.options.length > 0) { for (var i = 0; i <

  • JavaScript控制两个列表框listbox左右交换数据的方法

    本文实例讲述了JavaScript控制两个列表框listbox左右交换数据的方法.分享给大家供大家参考.具体分析如下: 这个功能我们经常用到,将左边列表框的元素移动到右边,或者将右边列表框的元素移动到左边,可以一次性全部移动 复制代码 代码如下: function listbox_moveacross(sourceID, destID) {     var src = document.getElementById(sourceID);     var dest = document.getEl

  • 用JavaScript实现类似于ListBox功能示例代码

    JavaScript对于多项数据的请求和处理过程中,如何实现常常困扰很多程序员,如何进行动态编辑和删除而不影响其他的数据项,今天介绍一种方法,可供借鉴,例如通过XmlRequest请求到如下数据: 复制代码 代码如下: <span style="font-size:14px;">{ "Table": [ { "Id": 3, "Type": "X", "Content": &

  • jsp实现上一页下一页翻页功能(示例代码)

    jsp实现上一页下一页翻页功能(示例代码)

    前段时间一直忙于期末考试和找实习,好久没写博客了. 这段时间做了个小项目,包含了翻页和富文本编辑器Ueditor的两个知识点,Ueditor玩的还不是很深,打算玩深后再写篇博客. 要实现翻页功能,只需要设置一个pageIndex即可,然后每次加载页面时通过pageIndex去加载数据就行. 那么我们可以设置一个隐藏的input框,用于传递pageIndex给下个页面. 当我们点击上一页的时候,通过js方法改变pageIndex的值,再提交表单即可 二话不多说,看代码,代码里面写的还算比较清楚.

  • BootStrap中的模态框（modal，弹出层）功能示例代码

    BootStrap中的模态框（modal，弹出层）功能示例代码

    bootstrap中的模态框(modal),不同于Tooltips,模态框以弹出对话框的形式出现,具有最小和最实用的功能集.务必将模态框的 HTML 代码放在文档的最高层级内(也就是说,尽量作为 body 标签的直接子元素),以避免其他组件影响模态框的展现或功能. 默认的modal示例: <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="utf-8">

  • 原生JavaScript实现弹幕组件的示例代码

    前言 如今几乎所有的视频网站都有弹幕功能,那么今天我们就自己用原生 JavaScript 封装一个弹幕类.这个类希望有如下属性和实例方法: 属性 el容器节点的选择器,容器节点应为绝对定位,设置好宽高 height 每条弹幕的高度 mode 弹幕模式,half则为一半容器高度,top为三分之一,full为占满 speed弹幕划过屏幕的时间 gapWidth后一条弹幕与前一条弹幕的距离 方法 pushData 添加弹幕元数据 addData持续加入弹幕 start开始调度弹幕 stop停止弹幕 r

  • 原生JavaScript实现模态框的示例代码

    原生JavaScript实现模态框的示例代码

    目录 原生js封装模态框 示例效果 代码 原生js封装模态框 最近需要一个模态框,然后一种是提示类的,一种是确认类型,我就想着再网上找一个然后修改一下,结果找到了,但是不深特别合适,我再次基础上在做了修改,对功能有所增强,纯原生写的,没有任何依赖性,适应性比较强,值copy即可使用. 配置:可以在实例化时对options进行参数设置,达到自己想要的效果 示例效果 代码 HTML部分 <head> <meta charset="utf-8"> <title&

  • JavaScript中removeChild 方法开发示例代码

    1. 概述 删除后的节点虽然不在文档树中了,但其实它还在内存中,可以随时再次被添加到别的位置. 当你遍历一个父节点的子节点并进行删除操作时,要注意,children属性是一个只读属性,并且它在子节点变化时会实时更新 // 拿到待删除节点: var self = document.getElementById('to-be-removed'); // 拿到父节点: var parent = self.parentElement; // 删除: var removed = parent.remove

  • vue loadmore组件上拉加载更多功能示例代码

    最近在做移动端h5页面,所以分页什么的就不能按照传统pc端的分页器的思维去做了,这么小的屏幕去点击也不太方便一般来讲移动端都是上拉加载更多,符合正常使用习惯. 首先简单写一下模板部分的html代码,,很简单清晰的逻辑: <template> <div class="loadmore"> <div class="loadmore__body"> <slot></slot> </div> <d

  • JavaScript下拉菜单功能实例代码

    本文给大家分享一段实例代码关于js实现下拉菜单功能,具体代码如下所示: <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>下拉菜单</title> <style type="text/css"> body, ul, li { margin: 0; padding: 0; fo

  • Android中imageView图片放大缩小及旋转功能示例代码

    Android中imageView图片放大缩小及旋转功能示例代码

    一.简介 二.方法 1)设置图片放大缩小效果 第一步:将<ImageView>标签中的android:scaleType设置为"fitCenter" android:scaleType="fitCenter" 第二步:获取屏幕的宽度 DisplayMetrics dm=new DisplayMetrics(); getWindowManager().getDefaultDisplay().getMetrics(dm); dm.widthPixels 第三

  • vue移动端写的拖拽功能示例代码

    相关知识点 touchstart 当在屏幕上按下手指时触发 touchmove 当在屏幕上移动手指时触发 touchend 当在屏幕上抬起手指时触发 mousedown mousemove mouseup对应的是PC端的事件 touchcancel 当一些更高级别的事件发生的时候(如电话接入或者弹出信息)会取消当前的touch操作,即触发 touchcancel.一般会在touchcancel时暂停游戏.存档等操作. 效果图 实现步骤html 总结了一下评论,好像发现大家都碰到了滑动的问题.就在

随机推荐