以下是 jQuery自定义添加删除表单代码 的示例演示效果:
部分效果截图:
HTML代码(index.html):
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>jQuery自定义添加删除表单代码</title>
<link rel="stylesheet" type="text/css" href="css/wenjuan_ht.css">
<script src="js/jquery-1.8.0.min.js"></script>
<script>
$(document).ready(function(e) {
$(".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 = 0;
//重新编号
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();
}
//题目选项
var texte_val = $(this).find("span").text();
dx_rq.find(".title_itram").children(".kzjxx_iteam").eq(bjjs-1).find(".input_wenbk").val(texte_val);
bjjs++
});
}
//多选题目
if(title==1){
dx_rq.show().html(duoxtm);
//模具题目选项的个数
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>");
//alert(i_tmxx);
}
//赋值文本框
//题目标题
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();
}
//题目选项
var texte_val = $(this).find("span").text();
dx_rq.find(".title_itram").children(".kzjxx_iteam").eq(bjjs-1).find(".input_wenbk").val(texte_val);
bjjs++
});
}
//填空题目
if(title==2){
dx_rq.show().html(tktm);
//赋值文本框
//题目标题
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);
}
//矩阵题目
if(title==3){
dx_rq.show().html(jztm);
}
});
//增加选项
$(".zjxx").live("click", function() {
var zjxx_html = $(this).prev(".title_itram").children(".kzjxx_iteam").html();
$(this).prev(".title_itram").append("<div class='kzjxx_iteam'>"+zjxx_html+"</div>");
});
//删除一行
$(".del_xm").live("click", function() {
//获取编辑题目的个数
var zuxxs_num = $(this).parent(".kzjxx_iteam").parent(".title_itram").children(".kzjxx_iteam").length;
if(zuxxs_num > 1){
$(this).parent(".kzjxx_iteam").remove();
}else{
alert("手下留情");
}
});
//取消编辑
$(".dx_box .qxbj_but").live("click", function() {
$(this).parent(".bjqxwc_box").parent(".dx_box").empty().hide();
$(".movie_box").css({"border":"1px solid #fff"});
$(".kzqy_czbut").remove();
//
});
//完成编辑(编辑)
$(".swcbj_but").live("click", function() {
var jcxxxx = $(this).parent(".bjqxwc_box").parent(".dx_box");
//编辑题目选项的个数
var bjtm_xm_length = jcxxxx.find(".title_itram").children(".kzjxx_iteam").length;
var xmtit_length = jcxxxx.parent(".movie_box").children(".wjdc_list").children("li").length-1;
//添加选项题目
//添加选项
if(bjtm_xm_length > xmtit_length){
var fzll = jcxxxx.parent(".movie_box").children(".wjdc_list").children("li").eq(1).html();
for(var toljs_add = 0 ; toljs_add < bjtm_xm_length - xmtit_length ; toljs_add++){
jcxxxx.parent(".movie_box").children(".wjdc_list").append("<li>"+fzll+"</li>")
}
}
//删除选项
if(bjtm_xm_length < xmtit_length) {
for(var toljs = xmtit_length ; toljs > bjtm_xm_length ; toljs--){
jcxxxx.parent(".movie_box").children(".wjdc_list").children("li").eq(toljs).remove();
}
}
//赋值文本框
//题目标题
var texte_bt_val_bj = jcxxxx.find(".btwen_text").val();
jcxxxx.parent(".movie_box").children(".wjdc_list").children("li").eq(0).find(".tm_btitlt").children(".btwenzi").text(texte_bt_val_bj);
//遍历题目项目的文字
var bjjs_bj=0;
jcxxxx.children(".title_itram").children(".kzjxx_iteam").each(function() {
//题目选项
var texte_val_bj = $(this).find(".input_wenbk").val();
jcxxxx.parent(".movie_box").children(".wjdc_list").children("li").eq(bjjs_bj+1).find("span").text(texte_val_bj);
bjjs_bj++
//可填空
var kxtk_yf = $(this).find(".fxk").is(':checked');
if(kxtk_yf){
//第几个被勾选
var jsxz = $(this).index();
//alert(jsxz);
jcxxxx.parent(".movie_box").children(".wjdc_list").children("li").eq(jsxz+1).find("span").after("<input name='' type='text' class='wenb_input'>");
}
});
//清除
$(this).parent(".bjqxwc_box").parent(".dx_box").empty().hide();
});
});
</script>
</head>
<body>
<div class=" all_660">
<div class="yd_box">
<div class="movie_box">
<ul class="wjdc_list">
<li>
<div class="tm_btitlt"><i class="nmb">1</i>. <i class="btwenzi">你有多久的公务员资历?</i></div>
</li>
<li>
<label>
<input name="a" type="radio" value="">
<span>0-3年</span></label>
</li>
<li>
<label>
<input name="a" type="radio" value="">
<span>4-10年</span></label>
</li>
<li>
<label>
<input name="a" type="radio" value="">
<span>11-20年</span></label>
</li>
<li>
<label>
<input name="a" type="radio" value="">
<span>20年以上</span></label>
</li>
<li>
<label>
<input name="a" type="radio" value="">
<span>其他</span> <input name="" type="text" class="wenb_input"></label>
</li>
</ul>
<div class="dx_box" data-t="0"></div>
</div>
<div class="movie_box">
<ul class="wjdc_list">
<li>
<div class="tm_btitlt"><i class="nmb">2</i>. <i class="btwenzi">对目前的工作哪方面不满意?</i><span class="tip_wz">【多选】</span></div>
</li>
<li>
<label>
<input name="" type="checkbox" value="">
<span>任务多、压力大</span></label>
</li>
<li>
<label>
<input name="" type="checkbox" value="">
<span>人际关系难处理,环境难适应</span></label>
</li>
<li>
<label>
<input name="" type="checkbox" value="">
<span> 缺少认同和成就感</span></label>
</li>
<li>
<label>
<input name="" type="checkbox" value="">
<span> 其他</span>
<input name="" type="text" class="wenb_input">
</label>
</li>
</ul>
<div class="dx_box" data-t="1"></div>
</div>
<div class="movie_box">
<ul class="wjdc_list">
<li>
<div class="tm_btitlt"><i class="nmb">3</i>. <i class="btwenzi">任务多、压力大任务多、压力大任务多、压力大?</i><span class="tip_wz">【填空】</span></div>
</li>
<li>
<label>
<textarea name="" cols="" rows="" class="input_wenbk btwen_text btwen_text_dx" onblur="if(!this.value)this.value='单选题目'" onclick="if(this.value&&this.value=='单选题目' ) this.value=''"></textarea>
</label>
</li>
</ul>
<div class="dx_box" data-t="2"></div>
</div>
<div class="movie_box">
<div class="wjdc_list">
<h4 class="title_wjht"><i class="nmb">4</i>. 对目前的工作哪方面不满意?</h4>
<table width="100%" border="0" cellspacing="0" cellpadding="0" class="tswjdc_table">
<tr>
<td class="lefttd_qk"> </td>
<td>非常喜欢</td>
<td>喜欢</td>
<td>一般</td>
<td>不喜欢</td>
<td>非常不喜欢</td>
</tr>
<tr class="os_bjqk">
<td class="lefttd_qk">CCTV1</td>
<td><input name="c1" type="radio" value=""></td>
<td><input name="c2" type="radio" value=""></td>
<td><input name="c3" type="radio" value=""></td>
<td><input name="c4" type="radio" value=""></td>
<td><input name="c5" type="radio" value=""></td>
</tr>
<tr>
<td class="lefttd_qk">CCTV2</td>
<td><input name="c1" type="radio" value=""></td>
<td><input name="c2" type="radio" value=""></td>
<td><input name="c3" type="radio" value=""></td>
<td><input name="c4" type="radio" value=""></td>
<td><input name="c5" type="radio" value=""></td>
</tr>
<tr class="os_bjqk">
<td class="lefttd_qk">CCTV3</td>
<td><input name="c1" type="radio" value=""></td>
<td><input name="c2" type="radio" value=""></td>
<td><input name="c3" type="radio" value=""></td>
<td><input name="c4" type="radio" value=""></td>
<td><input name="c5" type="radio" value=""></td>
</tr>
</table>
</div>
<div class="dx_box" data-t="3"></div>
</div>
</div>
<!--选项卡区域 模板区域---------------------------------------------------------------------------------------------------------------------------------------->
<div class="xxk_box" >
<ul class="xxk_title">
<li class="on">单选</li>
<li>多选</li>
<li>填空</li>
<li>矩阵</li>
</ul>
<div class="xxk_conn">
<!--单选----------------------------------------------------------------------------------------------------------------------------------------->
<div class="xxk_xzqh_box dxuan ">
<textarea name="" cols="" rows="" class="input_wenbk btwen_text btwen_text_dx" onblur="if(!this.value)this.value='单选题目'" onclick="if(this.value&&this.value=='单选题目' ) this.value=''"></textarea>
<div class="title_itram">
<div class="kzjxx_iteam">
<input name="" type="radio" value="" class="dxk">
<input name="" type="text" class="input_wenbk" value="选项" onblur="if(!this.value)this.value='选项'" onclick="if(this.value&&this.value=='选项' ) this.value=''">
<label>
<input name="" type="checkbox" value="" class="fxk">
<span>可填空</span></label>
<a href="javascript:void(0);" class="del_xm">删除</a> </div>
<div class="kzjxx_iteam">
<input name="" type="radio" value="" class="dxk">
<input name="" type="text" class="input_wenbk" value="选项" onblur="if(!this.value)this.value='选项'" onclick="if(this.value&&this.value=='选项' ) this.value=''">
<label>
<input name="" type="checkbox" value="" class="fxk">
<span>可填空</span></label>
<a href="javascript:void(0);" class="del_xm">删除</a> </div>
</div>
<a href="javascript:void(0)" class="zjxx">增加选项</a>
<!--完成编辑-->
<div class="bjqxwc_box"> <a href="javascript:void(0);" class="qxbj_but">取消编辑</a> <a href="javascript:void(0);" class="swcbj_but" > 完成编辑</a> </div>
</div>
<!--多选----------------------------------------------------------------------------------------------------------------------------------------->
<div class="xxk_xzqh_box duoxuan hide">
<textarea name="" cols="" rows="" class="input_wenbk btwen_text btwen_text_duox" onblur="if(!this.value)this.value='多选题目'" onclick="if(this.value&&this.value=='多选题目' ) this.value=''"></textarea>
<div class="title_itram">
<div class="kzjxx_iteam">
<input name="" type="radio" value="" class="dxk">
<input name="" type="text" class="input_wenbk" value="选项" onblur="if(!this.value)this.value='选项'" onclick="if(this.value&&this.value=='选项' ) this.value=''">
<label>
<input name="" type="checkbox" value="" class="fxk">
<span>可填空</span></label>
<a href="javascript:void(0);" class="del_xm">删除</a> </div>
<div class="kzjxx_iteam">
<input name="" type="radio" value="" class="dxk">
<input name="" type="text" class="input_wenbk" value="选项" onblur="if(!this.value)this.value='选项'" onclick="if(this.value&&this.value=='选项' ) this.value=''">
<label>
<input name="" type="checkbox" value="" class="fxk">
<span>可填空</span></label>
<a href="javascript:void(0);" class="del_xm">删除</a> </div>
</div>
<a href="javascript:void(0)" class="zjxx">增加选项</a>
<!--完成编辑-->
<div class="bjqxwc_box"> <a href="javascript:void(0);" class="qxbj_but">取消编辑</a> <a href="javascript:void(0);" class="swcbj_but" > 完成编辑</a> </div>
</div>
<!-- 填空----------------------------------------------------------------------------------------------------------------------------------------->
<div class="xxk_xzqh_box tktm hide">
<textarea name="" cols="" rows="" class="input_wenbk btwen_text btwen_text_tk" onblur="if(!this.value)this.value='填空题目'" onclick="if(this.value&&this.value=='填空题目' ) this.value=''"></textarea>
<!--完成编辑-->
<div class="bjqxwc_box"> <a href="javascript:void(0);" class="qxbj_but">取消编辑</a> <a href="javascript:void(0);" class="swcbj_but" > 完成编辑</a> </div>
</div>
<!-- 矩阵----------------------------------------------------------------------------------------------------------------------------------------->
<div class="xxk_xzqh_box hide">
<h4 class="title_wjht">1. 对目前的工作哪方面不满意?</h4>
<table width="100%" border="0" cellspacing="0" cellpadding="0" class="tswjdc_table">
<tr>
<td class="lefttd_qk"> </td>
<td>非常喜欢</td>
<td>喜欢</td>
<td>一般</td>
<td>不喜欢</td>
<td>非常不喜欢</td>
</tr>
<tr class="os_bjqk">
<td class="lefttd_qk">CCTV1</td>
<td><input name="c1" type="radio" value=""></td>
<td><input name="c2" type="radio" value=""></td>
<td><input name="c3" type="radio" value=""></td>
<td><input name="c4" type="radio" value=""></td>
<td><input name="c5" type="radio" value=""></td>
</tr>
<tr>
<td class="lefttd_qk">CCTV2</td>
<td><input name="c1" type="radio" value=""></td>
<td><input name="c2" type="radio" value=""></td>
<td><input name="c3" type="radio" value=""></td>
<td><input name="c4" type="radio" value=""></td>
<td><input name="c5" type="radio" value=""></td>
</tr>
<tr class="os_bjqk">
<td class="lefttd_qk">CCTV3</td>
<td><input name="c1" type="radio" value=""></td>
<td><input name="c2" type="radio" value=""></td>
<td><input name="c3" type="radio" value=""></td>
<td><input name="c4" type="radio" value=""></td>
<td><input name="c5" type="radio" value=""></td>
</tr>
</table>
<div class="line_dl"></div>
<div class="jztm">
<textarea name="" cols="" rows="" class="input_wenbk btwen_text" onblur="if(!this.value)this.value='题目'" onclick="if(this.value&&this.value=='题目' ) this.value=''"></textarea>
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr valign="top">
<td width="135"><h4 class="ritwenz_xx">左标题</h4>
<textarea name="" cols="" rows="" class="leftbtwen_text" onblur="if(!this.value)this.value='例子:CCTV1,CCTV2,CCTV3'" onclick="if(this.value&&this.value=='例子:CCTV1,CCTV2,CCTV3' ) this.value=''"></textarea></td>
<td><h4 class="ritwenz_xx ">右侧选项文字 <a href="#" class="xzqk">单选</a><a href="#" >多选</a></h4>
<div class="title_itram">
<div class="kzjxx_iteam">
<input name="" type="text" class="input_wenbk jzwent_input" value="选项" onblur="if(!this.value)this.value='选项'" onclick="if(this.value&&this.value=='选项' ) this.value=''">
<label>
<input name="" type="checkbox" value="" class="fxk">
<span>可填空</span></label>
<a href="javascript:void(0);" class="del_xm">删除</a> </div>
<div class="kzjxx_iteam">
<input name="" type="text" class="input_wenbk jzwent_input" value="选项" onblur="if(!this.value)this.value='选项'" onclick="if(this.value&&this.value=='选项' ) this.value=''">
<label>
<input name="" type="checkbox" value="" class="fxk">
<span>可填空</span></label>
<a href="javascript:void(0);" class="del_xm">删除</a> </div>
<div class="kzjxx_iteam">
<input name="" type="text" class="input_wenbk jzwent_input" value="选项" onblur="if(!this.value)this.value='选项'" onclick="if(this.value&&this.value=='选项' ) this.value=''">
<label>
<input name="" type="checkbox" value="" class="fxk">
<span>可填空</span></label>
<a href="javascript:void(0);" class="del_xm">删除</a> </div>
</div>
<a href="javascript:void(0)" class="zjxx" style="margin-left:0;">增加选项</a></td>
</tr>
</table>
<!--完成编辑-->
<div class="bjqxwc_box"> <a href="javascript:void(0);" class="qxbj_but">取消编辑</a> <a href="javascript:void(0);" class="swcbj_but" > 完成编辑</a> </div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
CSS代码(wenjuan_ht.css):
/* 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;background:url(../images/jiajia.png) no-repeat left;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;}