调查问卷生成json字符串
来源：互联网 发布：安卓pad应用推荐 知乎 编辑：程序博客网 时间：2024/04/29 14:38
大家可能见到一些问卷调查网站，可以拖拽生成自己想要的调查问卷。本人自己完成一个基于按钮的生成调查问卷的功能（可以得到问卷中题目组成的json字符串），现在只有文本框、单选、段落描述三种类型。附下功大家参考：
<!DOCTYPE html><html><head> <title></title> <meta charset="utf-8"> <script src="http://libs.baidu.com/jquery/1.11.3/jquery.min.js"></script> <style type="text/css"> .menu { float: left; width: 100px; height: 200px; margin-top: 200px; margin-left: 100px; /*background-color: #45B7FF;*/ text-align: center; border: 1px solid #45B7FF; } .menu .menu_bar { background-color: #45B7FF; font-size: larger; color: white; height: 30px; line-height: 30px; } .menu table { margin-top: 10px; margin-left: 30px; text-align: center; } .menu table td { height: 30px; line-height: 30px; } .menu table td a{ text-decoration: none; color: black; } .menu table td a:hover{ background-color: #CCCCCC; color: white; } .container { float: left; width: 900px; } .head { text-align: center; } .head button { background-color: #45B7FF; border-radius: 5px; width: 100px; height: 25px; border-color: #45B7FF; color: white; margin-left: 100px; } .head div { font-size: smaller; margin-top: 5px; margin-bottom: 10px; color: #CCCCCC; } .head input[type=text] { width: 169px; height: 21px; background-color: white; } .head select { width: 173px; height: 25px; } .head ul li { margin:5px 0px; } #content { width: 900px; text-align: left; } ul { list-style: none; } #content div { margin: 10px 5%; width: 90%; border: 1px solid #CCCCCC; padding: 5px 0px; } #content input[type=text] { width: 700px; border: none; height: 30px; padding-left: 5px; } #content ul { margin-top: 10px; margin-left: 50px; } #content ul li input[type=text] { width: 400px; } #content ul li { margin-bottom: 5px; } #content div textarea { width: 700px; height: 50px; border: none; margin-left: 5px; } #content label { height: 20px; line-height: 20px; display: inline-block; } .close { width: 30px !important; display: none; position: absolute; } .add { width: 30px !important; display: none; position: absolute; } .delete { width: 30px !important; display: none; position: absolute; }</style></head><body> <div class="main"> <div class="menu"> <div class="menu_bar">问卷类型</div> <div> <table> <tr><td><a href="javascript:;" id="label">段落</a></td></tr> <tr><td><a href="javascript:;" id="radio2">单选(2)</a></td></tr> <tr><td><a href="javascript:;" id="radio3">单选(3)</a></td></tr> <tr><td><a href="javascript:;" id="text">文本框</a></td></tr> </table> </div> </div> <div class="container"> <div class="head"> <ul> <li> 问卷名称： <input type="text" id="questionnaireName"> </li> <li> <button id="btnSubmit">提交</button> </li> </ul> <div>注：请创建问卷后再提交</div> </div> <div id="content"> </div> </div> </div> <!-- <button class="close">X</button> --></body></html><script type="text/javascript"> count = 0 ; function formRadio2() { count++; var radio = "<div id='Q" + count+"' name='Q" + count+"' type='radio' number='"+count+"'><label>" + "Q" + count+":</label> <input type='text' class='title' value='请输入单选描述'/>"+"<ul class='answer'><li><input type='radio'><input type='text' value='选项1'></li><li><input type='radio'><input type='text' value='选项2'> </li></ul><button class='close'>x</button><button class='add'>+</button><button class='delete'>-</button></div>"; return radio; } function formRadio3() { count++; var radio = "<div id='Q" + count+"' name='Q" + count+"' type='radio' number='"+count+"'><label>" + "Q" + count+":</label> <input type='text' class='title' value='请输入单选描述'/>"+"<ul class='answer'><li><input type='radio'><input type='text' value='选项1'></li><li><input type='radio'><input type='text' value='选项2'></li><li><input type='radio'><input type='text' value='选项3'></li></ul><button class='close'>x</button></div>"; return radio; } function formText() { count++; var text = "<div id='Q" + count+"' name='Q" + count+"' type='text' number='"+count+"'><label>" + "Q" + count+":</label> <input type='text' class='title' value='请输入文本框描述'/><ul><li><input type='text'></li></ul><button class='close'>x</button></div>"; return text; } function formLabel() { var label = "<div type='label'><textarea class='title'>请输入段落描述</textarea><button class='close'>x</button></div>"; return label; } $(".menu").on("click","a",function(){ var id = $(this).attr("id"); switch(id) { case "radio2" : var content = formRadio2(); $("#content").append(content); break; case "radio3" : var content = formRadio3(); $("#content").append(content); break; case "text" : var content = formText(); $("#content").append(content); break; case "label" : var content = formLabel(); $("#content").append(content); break; } }); $("#btnSubmit").on("click", function(){ var content = []; var count = 0; $("#content").find("div[type]").each(function(){ var type = $(this).attr("type"); if (type == "label") { var tempdata = {}; tempdata['type'] = type; tempdata['title'] = $(this).find("textarea").val(); content[count++] = tempdata; } else if (type == "radio") { var tempdata = {}; tempdata['id'] = $(this).attr("id");; tempdata['name'] = $(this).attr("name"); tempdata['type'] = type; tempdata['title'] = $(this).find("input.title").val(); var tempCount = 1; var tempRadio = {}; $(this).find(".answer input[type=text]").each(function(){ tempRadio[tempCount++] = $(this).val(); }); tempdata['answer'] = tempRadio; content[count++] = tempdata; } else if (type == "text") { var tempdata = {}; tempdata['id'] = $(this).attr("id");; tempdata['name'] = $(this).attr("name"); tempdata['type'] = type; tempdata['title'] = $(this).find("input.title").val(); content[count++] = tempdata; } }); var template = JSON.stringify( content ); var name = $("#questionnaireName").val(); console.log(template); console.log(name); }); $("#content").delegate("div[type]", "mouseover", function(){ var offset = $(this).offset(); var top = offset.top +10 ; var left = offset.left + 810 - 40; $(this).find(".close").css("top",top); $(this).find(".close").css("left",left); if ($(this).attr("type") == "radio") { $(this).find(".add").css("top",top+30); $(this).find(".add").css("left",left); $(this).find(".add").css("display","block"); $(this).find(".delete").css("top",top+60); $(this).find(".delete").css("left",left); $(this).find(".delete").css("display","block"); } $(this).find(".close").css("display","block"); }); $("#content").delegate("div[type]", "mouseout", function(){ $(this).find(".close").css("display","none"); if ($(this).attr("type") == "radio") { $(this).find(".add").css("display","none"); $(this).find(".delete").css("display","none"); } }); $(".main").delegate(".close", "click", function(){ var currentObj = $(this).closest("div[type]"); var type = currentObj.attr("type"); if (type == "label") { currentObj.remove(); } else { //带有Qn的div，需要更改div中n值，并且count-- var cur_number = currentObj.attr("number");//当前number currentObj.remove(); $("#content div[type!=label]").each(function(){ var number = $(this).attr("number"); if (number > cur_number) { $(this).attr("number", number-1); var qn = "Q" + --number; $(this).attr("id", qn); $(this).attr("name", qn); $(this).find("label").html(qn); } }); count--; } }); $(".main").delegate(".add", "click", function(){ var length = $(this).closest("div[type]").find("ul li").length; var content = "<li><input type='radio'><input type='text' value='选项"+ (length+1) +"'></li>"; $(this).closest("div[type]").find("ul").append(content); }); $(".main").delegate(".delete", "click", function(){ var length = $(this).closest("div[type]").find("ul li").length; $(this).closest("div[type]").find("ul li:last").remove(); }); </script> 0 0
- 调查问卷生成json字符串
- 调查问卷
- 免费调查问卷 调查问卷投票系统
- 如何设计调查问卷
- 大学生旅游调查问卷
- 如何设计“调查问卷”
- 包装设计调查问卷
- 生活水平调查问卷
- Moss调查问卷--仅供参考
- 调查问卷录入spss
- 用户需求调查问卷
- 校园调查问卷网站
- JavaScript实现调查问卷
- 用户调查问卷
- 调查问卷数据库设计
- 调查问卷实例
- Android调查问卷
- 创行调查问卷
- 如何高效的使用百度谷歌去搜索
- getMeasuredHeight()与getHeight的区别
- 日期计算
- DirectMemory（堆外（Off-Heap）缓存BigMemory的一个实现）
- 24. Swap Nodes in Pairs-节点交换|指针
- 调查问卷生成json字符串
- 1——Introduction to Microservices
- 蓝牙API介绍及基本功能实现
- Android 中 RegistrantList消息处理机制 以android 5.0 MT为例
- struts2 spring集成时struts.xml文件中action的class属性值意义
- git常用命令
- Visual Attention
- 友盟消息推送SDK集成
- 读取网络图片和本地sd卡图片文件 解析为空 SkImageDecoder::Factory returned null
