jquery自定义问卷调查问题和选项表单效果代码
代码语言：html
所属分类：表单美化
代码描述：jquery自定义问卷调查问题和选项表单效果代码
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开
<html>
<head>
<meta charset="utf-8">
<title>后台上移下移，编辑，删除效果</title>
<style>
/* CSS Document */
* {
margin: 0;
padding: 0;
}
a {
text-decoration: none;
color: #333;
-webkit-transition: 0.4s ease-in-out;
-moz-transition: 0.4s ease-in-out;
-ms-transition: 0.4s ease-in-out;
-o-transition: 0.4s ease-in-out;
transition: 0.4s ease-in-out;
}
a:hover {
color: #ff5c10;
}
a, img {
border: none;
}
img {
vertical-align: middle;
}
ul, li {
list-style: none;
}
em, i {
font-style: normal;
}
/**/
.all_660 {
width: 660px;
margin: 0 auto;
font-family: "微软雅黑";
font-size: 14px;
color: #333;
}
.dcwj_table {
border-top: 1px solid #ccc;
border-right: 1px solid #ccc;
}
.dcwj_table td {
border-bottom: 1px solid #ccc;
border-left: 1px solid #ccc;
height: 32px;
padding: 0 5px;
font-size: 12px;
}
.dcwj_table .td_title {
text-align: center;
}
.title_wjht {
font-weight: 400;
font-size: 16px;
padding: 5px 0 15px 0;
color: #666;
}
.qt_box {
height: auto;
overflow: hidden;
}
.qt_box .qtwenz {
float: left;
}
.qt_box a {
float: right;
color: #0099FF;
text-decoration: underline;
}
.bli_box {
height: auto;
overflow: hidden;
}
.bli_box .jdt_kk {
background: #ddd;
height: 10px;
display: block;
width: 100px;
float: left;
margin-top: 5px;
}
.bli_box .jdt_kk em {
display: block;
height: 10px;
background: #ff5c10;
width: 100%;
}
.bli_box .wen_zl {
float: right;
}
.ptjy_box {
height: 170px;
overflow: auto;
}
.jz_table td {
text-align: center;
}
.wjdc_list {
margin-top: 10px;
margin-bottom: 20px;
}
.wjdc_list li {
line-height: 32px;
color: #666;
}
.wjdc_list li .tm_btitlt {
font-size: 16px;
padding: 5px 0;
color: #666;
}
.wjdc_list li label {
margin-left: 0;
}
.wjdc_list li label input {
margin-right: 5px;
}
.wjdc_list li label .wenb_ipnput {
height: 100px;
line-height: 24px;
width: 600px;
border: 1px solid #ccc;
font-family: "微软雅黑";
font-size: 12px;
padding-left: 5px;
color: #666;
}
.tip_wz {
color: #026fda;
}
.wjdc_list li label .wenb_input {
border: 1px solid #ccc;
height: 22px;
line-height: 22px;
font-family: "微软雅黑";
font-size: 12px;
padding-left: 5px;
width: 210px;
margin-left: 5px;
}
/*选项卡*/
.xxk_box {
margin-top: 20px;
}
.xxk_title {
height: auto;
overflow: hidden;
}
.xxk_title li {
background: #ddd;
float: left;
height: 40px;
line-height: 40px;
width: 164px;
text-align: center;
border-right: 1px solid #fff;
}
.xxk_title li.on {
background: #0099ff;
color: #fff;
}
.xxk_conn .xxk_xzqh_box {
padding: 20px;
background: #f2f2f2;
}
.input_wenbk {
font-family: "微软雅黑";
width: 450px;
height: 33px;
line-height: 33px;
padding-left: 10px;
border: 1px solid #ccc;
background: #FFF;
color: #666;
}
.btwen_text {
font-family: "微软雅黑";
height: 66px;
width: 608px;
margin-bottom: 15px;
}
.kzjxx_iteam {
height: 35px;
overflow: hidden;
margin-bottom: 10px;
line-height: 35px;
}
.kzjxx_iteam input {
float: left;
}
.kzjxx_iteam span {
float: left;
}
.kzjxx_iteam a {
float: right;
color: #999;
}
.kzjxx_iteam a:hover {
color: #ff5c10;
}
.kzjxx_iteam input.dxk {
margin: 10px 10px 0 10px;
}
.kzjxx_iteam input.fxk {
margin: 10px 2px 0 10px;
}
a.zjxx {
display: block;
height: 16px;
color: #0099ff;
font-size: 14px;
font-weight: bold;
line-height: 16px;
padding-left: 20px;
margin-left: 30px;
margin-top: 15px;
}
.bjqxwc_box {
height: auto;
overflow: hidden;
}
.swcbj_but {
display: block;
width: 50%;
color: #fff;
float: left;
font-size: 14px;
background: #0099ff;
line-height: 40px;
height: 40px;
text-align: center;
border: none;
margin-top: 15px;
}
.swcbj_but:hover {
background: #0099cc;
color: #fff;
}
.qxbj_but {
display: block;
width: 50%;
float: left;
color: #333;
font-size: 14px;
background: #fff;
line-height: 40px;
height: 40px;
text-align: center;
border: none;
margin-top: 15px;
}
.qxbj_but:hover {
background: #ddd;
color: #333;
}
.tswjdc_table {
width: 100%;
margin-bottom: 20px;
}
.tswjdc_table td {
text-align: center;
width: 15%;
line-height: 30px;
}
.tswjdc_table td.lefttd_qk {
text-align: left;
padding-left: 10px;
}
.jzwent_input {
width: 330px;
}
.leftbtwen_text {
font-family: "微软雅黑";
width: 108px;
height: 160px;
line-height: 33px;
padding-left: 10px;
border: 1px solid #ccc;
background: #FFF;
color: #666;
}
.ritwenz_xx {
font-size: 14px;
padding-bottom: 10px;
height: 24px;
line-height: 24px;
}
.ritwenz_xx a {
display: inline-block;
height: 22px;
line-height: 22px;
border: 1px solid #ccc;
color: #999;
font-size: 12px;
font-weight: 400;
padding: 0 5px;
margin-left: 10px;
border-radius: 5px;
}
.ritwenz_xx a.xzqk {
border: 1px solid #0099ff;
color: #0099ff;
}
.line_dl {
border-bottom: 1px solid #ccc;
margin-bottom: 20px;
}
/**/
.movie_box {
position: relative;
z-index: 8;
border: 1px solid #fff;
padding: 0 5px;
}
.kzqy_czbut {
text-align: right;
position: absolute;
top: 5px;
right: 5px;
}
.kzqy_czbut a {
display: inline-block;
font-size: 12px;
padding: 4px 10px;
background: #0099ff;
color: #fff;
margin-left: 5px;
}
.hide {
display: none;
}
.dx_box {
display: none;
padding: 20px;
background: #f2f2f2;
}
</style>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/jquery-3.2.1.min.js"></script>
<script>
$(document).ready(function(e) {
$('#addquerstions').change(function() {
// debugger
var index = $(this).val(); //选择添加问题的类型
if (index == "-1") {
return;
}
var movie_box = '<div class="movie_box" style="border: 1px solid rgb(255, 255, 255);"></div>';
var Grade = $(".yd_box").find(".movie_box").length + 1;
switch (index) {
case "0": //单选
case "1": //多选
case "2": //问答
var wjdc_list = '<ul class="wjdc_list"></ul>'; //问答 单选 多选
var danxuan = "";
if (index == "0") {
danxuan = '【单选】';
} else if (index == "1") {
danxuan = '【多选】';
} else if (index == "2") {
danxuan = '【问答】';
}
wjdc_list = $(wjdc_list).append(' <li><div class="tm_btitlt"><i class="nmb">' + Grade + '</i>. <i class="btwenzi">请编辑问题？</i><span class="tip_wz">' + danxuan + '</span></div></li>');
if (index == "2") {
wjdc_list = $(wjdc_list).append('<li> <label> <textarea name="" cols="" rows="" class="input_wenbk btwen_text btwen_text_dx" ></textarea></label> </li>');
}
movie_box = $(movie_box).append(wjdc_list);
movie_box = $(movie_box).append('<div class="dx_box" data-t="' + index + '"></div>');
break;
case "3":
var wjdc_list = ' <div class="wjdc_list"><h4 class="title_wjht"><i class="nmb">' + Grade + '</i>. 请编辑问题!<span class="tip_wz">【矩阵】</span></h4>'
+' <table width="100%" border="0" cellspacing="0" cellpadding="0" class="tswjdc_table"><tbody></tbody></table></div>'; //问答 单选 多选
movie_box = $(movie_box).append(wjdc_list);
movie_box = $(movie_box).append('<div class="dx_box" data-t="' + index + '"></div>');
break;
}
$(movie_box).hover(function() {
var html_cz = "<div class='kzqy_czbut'><a href='javascript:void(0)' class='sy'>上移</a><a href='javascript:void(0)' class='xy'>下移</a><a href='javascript:void(0)' class='bianji'>编辑</a><a href='javascript:void(0)' class='del' >删除</a></div>"
$(this).css({
"border": "1px solid #0099ff"
});
$(this).children(".wjdc_list").after(html_cz);
}, function() {
$(this).css({
"border": "1px solid #fff"
});
$(this).children(".kzqy_czbut").remove();
//$(this).children(".dx_box").hide();
});
$(".yd_box").append(movie_box);
});
/* $(".btwen_text").val("题目");
$(".btwen_text_dx").val("单选题目");
$(".btwen_text_duox").val("多选题目");
$(".btwen_text_tk").val("填空题目");
$(".leftbtwen_text").val("例子：CCTV1，CCTV2，CCTV3");
$(".xxk_title li").click(function() {
var xxkjs = $(this).index();
$(this).addClass("on").siblings().removeClass("on");
$(".xxk_conn").children(".xxk_xzqh_box").eq(xxkjs).show().siblings().hide();
});*/
//鼠标移上去显示按钮
$(".movie_box").hover(function() {
var html_cz = "<div class='kzqy_czbut'><a href='javascript:void(0)' class='sy'>上移</a><a href='javascript:void(0)' class='xy'>下移</a><a href='javascript:void(0)' class='bianji'>编辑</a><a href='javascript:void(0)' class='del' >删除</a></div>"
$(this).css({
"border": "1px solid #0099ff"
});
$(this).children(".wjdc_list").after(html_cz);
},
function() {
$(this).css({
"border": "1px solid #fff"
});
$(this).children(".kzqy_czbut").remove();
//$(this).children(".dx_box").hide();
});
//下移
$(".xy").live("click",
function() {
//文字的长度
var leng = $(".yd_box").children(".movie_box").length;
var dqgs = $(this).parent(".kzqy_czbut").parent(".movie_box").index();
if (dqgs < leng - 1) {
var czxx = $(this).parent(".kzqy_czbut").parent(".movie_box");
var xyghtml = czxx.next().html();
var syghtml = czxx.html();
czxx.next().html(syghtml);
czxx.html(xyghtml);
//序号
czxx.children(".wjdc_list").find(".nmb").text(dqgs + 1);
czxx.next().children(".wjdc_list").find(".nmb").text(dqgs + 2);
} else {
alert("到底了");
}
});
//上移
$(".sy").live("click",
function() {
//文字的长度
var leng = $(".yd_box").children(".movie_box").length;
var dqgs = $(this).parent(".kzqy_czbut").parent(".movie_box").index();
if (dqgs > 0) {
var czxx = $(this).parent(".kzqy_czbut").parent(".movie_box");
var xyghtml = czxx.prev().html();
var syghtml = czxx.html();
czxx.prev().html(syghtml);
czxx.html(xyghtml);
//序号
czxx.children(".wjdc_list").find(".nmb").text(dqgs + 1);
czxx.prev().children(".wjdc_list").find(".nmb").text(dqgs);
} else {
alert("到头了");
}
});
//删除
$(".del").live("click",
function() {
var czxx = $(this).parent(".kzqy_czbut").parent(".movie_box");
var zgtitle_gs = czxx.parent(".yd_box").find(".movie_box").length;
var xh_num = 1;
//重新编号
czxx.parent(".yd_box").find(".movie_box").each(function() {
$(".yd_box").children(".movie_box").eq(xh_num).find(".nmb").text(xh_num);
xh_num++;
//alert(xh_num);
});
czxx.remove();
});
//编辑
$(".bianji").live("click",
function() {
//编辑的时候禁止其他操作
$(this).siblings().hide();
//$(this).parent(".kzqy_czbut").parent(".movie_box").unbind("hover");
var dxtm = $(".dxuan").html();
var duoxtm = $(".duoxuan").html();
var tktm = $(".tktm").html();
var jztm = $(".jztm").html();
//接受编辑内容的容器
var dx_rq = $(this).parent(".kzqy_czbut").parent(".movie_box").find(".dx_box");
var title = dx_rq.attr("data-t");
//alert(title);
//题目选项的个数
var timlrxm = $(this).parent(".kzqy_czbut").parent(".movie_box").children(".wjdc_list").children("li").length;
//单选题目
if (title == 0) {
dx_rq.show().html(dxtm);
//模具题目选项的个数
var bjxm_length = dx_rq.find(".title_itram").children(".kzjxx_iteam").length;
var dxtxx_html = dx_rq.find(".title_itram").children(".kzjxx_iteam").html();
//添加选项题目
for (var i_tmxx = bjxm_length; i_tmxx < timlrxm - 1; i_tmxx++) {
dx_rq.find(".title_itram").append("<div class='kzjxx_iteam'>" + dxtxx_html + "</div>");
}
//赋值文本框
//题目标题
var texte_bt_val = $(this).parent(".kzqy_czbut").parent(".movie_box").find(".wjdc_list").children("li").eq(0).find(".tm_btitlt").children(".btwenzi").text();
dx_rq.find(".btwen_text").val(texte_bt_val);
//遍历题目项目的文字
var bjjs = 0;
$(this).parent(".kzqy_czbut").parent(".movie_box").find(".wjdc_list").children("li").each(function() {
//可选框框
var ktksfcz = $(this).find("input").hasClass("wenb_input");
if (ktksfcz) {
var jsxz_kk = $(this).index();
dx_rq.find(".title_itram").children(".kzjxx_iteam").eq(jsxz_kk - 1).find("label").remove();
}
.........完整代码请登录后点击上方下载按钮下载查看
热门代码搜索
其他语言代码库
Html代码库
Python代码库
Java代码库
Php代码库
Phpcli代码库
Golang代码库
C#代码库
Nodejs代码库
C代码库
C++代码库
Sql代码库
R代码库
Rust代码库
Ruby代码库
Dart代码库
Vb代码库
D代码库
F#代码库
Typescript代码库
Coffeescript代码库
Julia代码库
Kotlin代码库
Perl代码库
Groovy代码库
Lua代码库
Vala代码库
Ocaml代码库
Assembly代码库
Objectc代码库
Scala代码库
Erlang代码库
Pascal代码库
Swift代码库
Fortran代码库
Bash代码库
Clojure代码库
Ada代码库
Elixir代码库
Cobol代码库
Haskell代码库
Nim代码库
Racket代码库
Lisp代码库
网友评论0