表格批量删除，新增一条，删除一条，进行排序
效果如图：
1.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<link rel="stylesheet" href="css/personel.css" />
<style>
table{border: 1px solid #eee;width: 500px;}
table tr td{border: 1px solid #eee;}
select{width: 100%;outline: none;}
</style>
</head>
<body>
<div class="laycenter" >
<div class="laycenter_bg">
<div class="laytitle">
<div class="lay_line"></div>
<div class="lay_line_txt">奖励信息</div>
</div>
<!--lay_tab action-->
<div class="lay_tab">
<div class="laytab_list basic_tab laytab_listac ">奖励信息</div>
<div class="laytab_list political_tab">惩戒信息</div>
</div>
<!--lay_tab end-->
<!--personel_info action-->
<div class="layper_tab basic_infor">
<div class="yesno_radio">
<div class="radio_name">
<span>是否有奖励情况</span><span class="red_star">*</span>
</div>
<div class="radio_ipt">
<input type="radio" class="yn_reward" value="是" name="yn_reward" checked="checked"/><label class="lay_label">是</label>
<input type="radio" class="yn_reward" value="否" name="yn_reward"/><label class="lay_label">否</label>
</div>
</div>
<div class="lay_right_btn">
<button type="button" class="all_del_btn reward_del_btn" onclick="RewardAll()">批量删除</button>
<button type="button" class="lay_add_btn reward_add_btn" onclick="addReward()">添加</button>
</div>
<div>
<div class="table_area">
<table class="per_table" id="reward_table">
<tr>
<td><div class="taball_checkbox"><input type="checkbox" class="reward_all"/></div></td>
<td>序号</td>
<td>奖励时间</td>
<td>授予单位</td>
<td>奖励名称</td>
<td>授予单位层级</td>
<td>操作</td>
</tr>
<tr id="reward_tr0">
<td><div class="taball_checkbox"><input type="checkbox" value="0" class="reward_list"/></div></td>
<td class="td_center">1</td>
<td><input type="text" class="tab_date reward_date0"/></td>
<td><input type="text" class="reward_work0" value="深圳市有限公司" /></td>
<td><input type="text" class="record_name0" value="积极上进好员工" /></td>
<td>
<select class="record_leavel0">
<option value="">请选择</option>
<option value="0">自治区级单位</option>
<option value="1">市级单位</option>
<option value="2">县级单位</option>
</select>
</td>
<td><button type="button" class="tab_del" onclick="DelReward(0)">删除</button></td>
</tr>
<!--<tr id="reward_tr1">
<td><div class="taball_checkbox"><input type="checkbox" value="1" class="reward_list"/></div></td>
<td>2</td>
<td><input type="text" class="tab_date reward_date1"/></td>
<td><input type="text" class="reward_work1" value="深圳市限公司" /></td>
<td><input type="text" class="record_name1" value="优秀员工" /></td>
<td>
<select class="record_leavel1">
<option value="">请选择</option>
<option value="0">自治区级单位</option>
<option value="1">市级单位</option>
<option value="2">县级单位</option>
</select>
</td>
<td><button type="button" class="tab_del" onclick="DelReward(0)">删除</button></td>
</tr>
-->
</table>
<div class="tab_btnarea"><button type="button" class="tab_save record_save">保存</button></div>
</div>
</div>
</div>
<!--personel_info end-->
<!--political_outlook action-->
<div class="layper_tab political_outlook">
<div class="yesno_radio">
<div class="radio_name">
<span>是否有惩戒情况</span><span class="red_star">*</span>
</div>
<div class="radio_ipt">
<input type="radio" class="yn_discipline" value="是" name="yn_discipline" /><label class="lay_label">是</label>
<input type="radio" class="yn_discipline" value="否" name="yn_discipline" checked="checked" /><label class="lay_label">否</label>
</div>
</div>
<div class="lay_right_btn">
<button type="button" class="all_del_btn discipline_del_btn" onclick="DeldiscAll()">批量删除</button>
<button type="button" class="lay_add_btn discipline_add_btn" onclick="addDiscipline()">添加</button>
</div>
<div>
<div class="table_area">
<table class="per_table" id="discipline_tab">
<tr>
<td><div class="taball_checkbox"><input type="checkbox" class="discipline_all"/></div></td>
<td>序号</td>
<td>惩戒时间</td>
<td>惩戒情况</td>
<td>操作</td>
</tr>
<tr id="dis_tr0">
<td><div class="taball_checkbox"><input type="checkbox" value="0" class="discipline_list"/></div></td>
<td class="discipline_len">1</td>
<td><input type="text" class="tab_date discipline_date0"/></td>
<td><input type="text" value="迟到" class="discipline_situ0" /></td>
<td><button type="button" class="tab_del discipline_delline0" onclick="DelDiscipline(0)">删除</button></td>
</tr>
<!--<tr id="dis_tr1">
<td><div class="taball_checkbox"><input type="checkbox" class="discipline_list"/></div></td>
<td>2</td>
<td><input type="text" class="tab_date discipline_date1" value="201805"/></td>
<td><input type="text" value="早退" class="discipline_situ1"/></td>
<td><button type="button" class="tab_del discipline_delline1" onclick="DelDiscipline(1)">删除</button></td>
</tr>-->
</table>
<div class="tab_btnarea"><button type="button" class="tab_save discipline_save">保存</button></div>
</div>
</div>
</div>
<!--political_outlook end-->
</div>
</div>
</body>
<script src="js/jquery.min.js"></script>
<script src="js/layDate-v5.0.9/laydate/laydate.js"></script>
<script src="js/layer/layer.js"></script>
<script src="js/personel_rewards.js"></script>
</html>
2.personel_rewardsjs
/*
* 选项卡js
*/
$('.laytab_list').click(function()
{
$('.laytab_list').removeClass('laytab_listac');
$(this).addClass('laytab_listac');
})
//选项卡一
$('.basic_tab').click(function()
{
$('.layper_tab').hide();
$('.basic_infor').show();
// $('.last_btn').hide();
})
//选项卡二
$('.political_tab').click(function()
{
$('.layper_tab').hide();
$('.political_outlook').show();
// $('.last_btn').show();
})
//所有日期遍历
lay('.tab_date').each(function(){//多个绑定
laydate.render({
elem: this,trigger: 'click',theme: '#3387c9',format: 'yyyyMM',type:'month',max: 0
});
});
//是否有奖励情况
YesNO_Rreward();//初始化
function YesNO_Rreward(){
var yn_reward;
$(".yn_reward").each(function(){
if($(this).attr("checked")){
yn_reward=$(this).attr("value")
}
});
var id_btn='.reward_del_btn,.reward_add_btn,#reward_table input,#reward_table select,#reward_table button,.record_save';
if(yn_reward=="是"){
$(id_btn).removeAttr("disabled");
$(id_btn).css('cursor','default');
}else{
$(id_btn).attr('disabled','disabled');//禁止书写
$(id_btn).css('cursor','not-allowed');
}
}
$(".yn_reward").change(function(){
YesNO_Rreward();
})
// 奖励全选方法
$('.reward_all').change(function()
{
var flag = false;
if($(this).is(':checked')){
flag = true;
}else{
flag = false;
}
$(".reward_list").each(function() {
$(this).attr("checked", flag);
});
})
//奖励批量删除
function RewardAll()
{
// var text = $("input:checkbox[class='discipline_list']:checked").map(
var text = $(".reward_list:checked").map(function(index,elem)
{
var delnum=$(".reward_list:checked").length;//删除的条数
var j=$(elem).val();//删除的那几行
var mytable = document.getElementById("reward_table");
var len=mytable.rows.length; //表格所有行数
var myrow = document.getElementById("reward_tr"+j);
mytable.deleteRow(myrow.rowIndex);//删除
// console.log(delnum)
var del=len-delnum;//删除过后的行数
//caoyangyang写的
for(var i = 0 ; i<(del); i++){
var tab = document.getElementById("reward_table");
// tab.rows[i+1].cells[1].innerText = i+1;
// tab.rows[i+1].cells[2].getElementsByTagName("input")[0].className='tab_date reward_date'+i;
$("#reward_table tr").eq(i+1).attr('id','reward_tr'+i);//tr_id
$('#reward_table tr:eq('+(i+1)+') td:eq(0) input').val(i);
$('#reward_table tr:eq('+(i+1)+') td:eq(1)').html(i+1);
$('#reward_table tr:eq('+(i+1)+') td:eq(2) input').attr("class","tab_date reward_date"+i);
$('#reward_table tr:eq('+(i+1)+') td:eq(3) input').attr("class","reward_work"+i);
$('#reward_table tr:eq('+(i+1)+') td:eq(4) input').attr("class","record_name"+i);
$('#reward_table tr:eq('+(i+1)+') td:eq(5) select').attr("class","record_leavel"+i);
}
return $(elem).val();
}).get().join(',');
if(text == ""){
layer.msg("请选择一条奖励信息");
return;
}
}
//奖励添加一行
function addReward()
{
var mytable = document.getElementById("reward_table");
var len=mytable.rows.length;
var i=len-1;
var mytr = mytable.insertRow(len);
mytr.setAttribute("id","reward_tr"+i);
var mytd_1=mytr.insertCell(0);
var mytd_2=mytr.insertCell(1);
mytd_2.setAttribute("class","td_center");
var mytd_3=mytr.insertCell(2);
var mytd_4=mytr.insertCell(3);
var mytd_5=mytr.insertCell(4);
var mytd_6=mytr.insertCell(5);
var mytd_7=mytr.insertCell(6);
mytd_1.innerHTML='<div class="taball_checkbox"><input type="checkbox" value="'+i+'" class="reward_list"/>';
mytd_2.innerHTML=len; //序号
mytd_3.innerHTML='<input type="text" class="tab_date reward_date'+i+'"/>';
mytd_4.innerHTML='<input type="text" class="reward_work'+i+'"/>';
mytd_5.innerHTML='<input type="text" class="record_name'+i+'" />';
mytd_6.innerHTML='<select class="record_leavel'+i+'"><option value="">请选择</option><option value="0">自治区级单位</option><option value="1">市级单位</option><option value="2">县级单位</option></select>';
mytd_7.innerHTML='<button type="button" class="tab_del reward_delline'+i+'" onclick="DelReward('+i+')">删除</button>';
//所有日期遍历
lay('.tab_date').each(function(){//多个绑定
laydate.render({
elem: this,trigger: 'click',theme: '#3387c9',format: 'yyyyMM',type:'month',max:0
});
});
}
//奖励删除
function DelReward(j)
{
layer.confirm('确定删除该行奖励信息？', {
btn: ['确认','取消'] //按钮
}, function(){
//删除当前行,然后实现重排序
var mytable = document.getElementById("reward_table");
var len=mytable.rows.length;
var myrow = document.getElementById("reward_tr"+j);
mytable.deleteRow(myrow.rowIndex);//删除
// alert(len)
console.log(j<len-2)
//如果不是删除最后一行，先将后面行输入的数据保存位true,
if(j<len-2){
console.log("通过")
var reward_date=new Array([len-j-2]);
var reward_work=new Array([len-j-2]);
var record_leavel=new Array([len-j-2]);
var record_name=new Array([len-j-2]);
var k=0;
for(var i=j+1;i<=len-2;i++){
reward_date[k]=$('.reward_date'+i).val(); //时间
reward_work[k]=$('.reward_work'+i).val();//授予单位
record_leavel[k]=$('.record_leavel'+i).val();//授予单位
record_name[k]=$('.record_name'+i).val();//名称
mytable.deleteRow(document.getElementById("reward_tr"+i).rowIndex);
k++;
}
// <!--删除以后重排序。-->
var h=j;
for(var i=0;i<len-2-j;i++){
addReward();
$('.reward_date'+h).val(reward_date[i]);
$('.reward_work'+h).val(reward_work[i]);
$('.record_leavel'+h).val(record_leavel[i]);
$('.record_name'+h).val(record_name[i]);
h++;
}
}
layer.closeAll('dialog');
}, function(){
//取消
});
}
//是否有惩戒情况
YesNO_disc();//初始化
function YesNO_disc(){
var yn_discipline;
$(".yn_discipline").each(function(){
if($(this).attr("checked")){
yn_discipline=$(this).attr("value")
}
});
var id_btn='.discipline_del_btn,.discipline_add_btn,#discipline_tab input,#discipline_tab select,#discipline_tab button,.discipline_save';
if(yn_discipline=="是"){
$(id_btn).removeAttr("disabled");
$(id_btn).css('cursor','default');
}else{
$(id_btn).attr('disabled','disabled');//禁止书写
$(id_btn).css('cursor','not-allowed');
}
}
$(".yn_discipline").change(function(){
YesNO_disc();
})
// 惩戒全选方法
$('.discipline_all').change(function()
{
var flag = false;
if($(".discipline_all").is(':checked')){
flag = true;
}else{
flag = false;
}
$(".discipline_list").each(function() {
$(this).attr("checked", flag);
});
})
//惩戒批量删除
function DeldiscAll()
{
// var text = $("input:checkbox[class='discipline_list']:checked").map(
var text = $(".discipline_list:checked").map(function(index,elem)
{
return $(elem).val();
}).get().join(',');
if(text == ""){
layer.msg("请选择一条惩戒信息");
return;
}
}
//惩戒添加一行
function addDiscipline()
{
var mytable = document.getElementById("discipline_tab");
var len=mytable.rows.length;
var i=len-1;
var mytr = mytable.insertRow(len);
mytr.setAttribute("id","dis_tr"+i);
var mytd_1=mytr.insertCell(0);
var mytd_2=mytr.insertCell(1);
mytd_2.setAttribute("class","discipline_len");
var mytd_3=mytr.insertCell(2);
var mytd_4=mytr.insertCell(3);
var mytd_5=mytr.insertCell(4);
mytd_1.innerHTML='<div class="taball_checkbox"><input type="checkbox" value="'+i+'" class="discipline_list"/>';
mytd_2.innerHTML=len; //序号
mytd_3.innerHTML='<input type="text" class="tab_date discipline_date'+i+'"/>';
mytd_4.innerHTML='<input type="text" class="discipline_situ'+i+'"/>';
mytd_5.innerHTML='<button type="button" class="tab_del discipline_delline'+i+'" onclick="DelDiscipline('+i+')">删除</button>';
//所有日期遍历
lay('.tab_date').each(function(){//多个绑定
laydate.render({
elem: this,trigger: 'click',theme: '#3387c9',format: 'yyyyMM',type:'month',max: 0
});
});
}
//惩戒删除
function DelDiscipline(j)
{
layer.confirm('确定删除该行惩戒信息？', {
btn: ['确认','取消'] //按钮
}, function(){
//删除当前行,然后实现重排序
var mytable = document.getElementById("discipline_tab");
var len=mytable.rows.length;
var myrow = document.getElementById("dis_tr"+j);
// if(document.getElementById('discipline_situ'+j).value!=''){
// if(true){
// mytable.deleteRow(myrow.rowIndex);
// }else{
// return false;
// }
// }else{
mytable.deleteRow(myrow.rowIndex);
// }
//如果不是删除最后一行，先将后面行输入的数据保存
if(j<len-2){
var discipline_date=new Array([len-j-2]);
var discipline_situ=new Array([len-j-2]);
var k=0;
for(var i=j+1;i<=len-2;i++){
discipline_date[k]=$('.discipline_date'+i).val(); //时间
discipline_situ[k]=$('.discipline_situ'+i).val();//惩戒情况
mytable.deleteRow(document.getElementById("dis_tr"+i).rowIndex);
k++;
}
// <!--删除以后重排序。-->
var h=j;
for(var i=0;i<len-2-j;i++){
addDiscipline();
$('.discipline_date'+h).val(discipline_date[i])
$('.discipline_situ'+h).val(discipline_situ[i])
h++;
}
}
layer.closeAll('dialog');
}, function(){
//取消
});
}
/***************奖励信息 action*************/
$('.record_save').click(function(){
$(".yn_reward").each(function(){
if($(this).attr("checked")){
yn_reward=$(this).attr("value")
}
});
if(yn_reward=="是"){
reward_table = document.getElementById("reward_table");
var count = reward_table.rows.length;
//
var flag1 = false;
for(var i = 0;i<count-1;i++ ){
if($('.reward_date'+i).val()!=""){
if($('.reward_work'+i).val()!=""&&$('.record_name'+i).val()!=""&&$('.record_leavel'+i).val()!="")
{
}else{
layer.msg("请将已填写的奖励信息的其他字段信息填写完整");
return;
}
flag1=true;
}
if($('.reward_work'+i).val()!=""){
if($('.reward_date'+i).val()!=""&&$('.record_name'+i).val()!=""&&$('.record_leavel'+i).val()!="")
{
}else{
layer.msg("请将已填写的奖励信息的其他字段信息填写完整");
return;
}
flag1=true;
}
if($('.record_name'+i).val()!=""){
if($('.reward_date'+i).val()!=""&&$('.reward_work'+i).val()!=""&&$('.record_leavel'+i).val()!="")
{
}else{
layer.msg("请将已填写的奖励信息的其他字段信息填写完整");
return;
}
flag1=true;
}
if($('.record_leavel'+i).val()!=""){
if($('.reward_date'+i).val()!=""&&$('.reward_work'+i).val()!=""&&$('.record_name'+i).val()!="")
{
}else{
layer.msg("请将已填写的奖励信息的其他字段信息填写完整");
return;
}
flag1=true;
}
if(!flag1){
layer.msg('请填写奖励信息')
return;
}
}
}
layer.msg('保存成功');
})
/***************奖励信息 end*************/
/***************惩戒情况 action*************/
$('.discipline_save').click(function(){
$(".yn_discipline").each(function(){
if($(this).attr("checked")){
yn_discipline=$(this).attr("value")
}
});
if(yn_discipline=="是"){
discipline_tab = document.getElementById("discipline_tab");
var count = discipline_tab.rows.length;
//
var flag1 = false;
for(var i = 0;i<count-1;i++ ){
if($('.discipline_date'+i).val()!=""){
if($('.discipline_situ'+i).val()!="")
{
}else{
layer.msg("请将已填写的惩戒情况的其他字段信息填写完整");
return;
}
flag1=true;
}
if($('.discipline_situ'+i).val()!=""){
if($('.discipline_date'+i).val()!="")
{
}else{
layer.msg("请将已填写的惩戒情况的其他字段信息填写完整");
return;
}
flag1=true;
}
if(!flag1){
layer.msg('请填写惩戒情况')
return;
}
}
}
layer.msg('保存成功');
})
/***************惩戒情况 end*************/
3.页面样式
*{font-size: 14px;}
input,button,select,textarea{outline: none;}
textarea{resize: none;}
.laycenter{
width: 99%;
height: auto;
overflow: hidden;
}
.laycenter_bg{
width: 100%;
float: left;
background: #fff;
border-radius: 5px 5px;padding:15px 20px;
height: auto;
}
.laytitle{width: 100%;float: left;}
.lay_line{width: 4px;height: 20px;background: #3387c9;float: left;margin-right: 10px;}
.lay_line_txt{float: left;font-size: 16px;color: #333;line-height: 20px;}
.lay_tab{float: left;margin-top: 15px;}
.lay_tab .laytab_list{float: left;height: 36px;background: #fff;color: #333;line-height: 36px;text-align: center;border: 1px solid #B5B5B5;cursor: pointer;border-left:none ;font-size: 14px;padding-left: 15px;padding-right: 15px;}
.lay_tab .laytab_listac{float: left;height: 36px;background: #3387C9;color: #fff;line-height: 36px;text-align: center;border: 1px solid #3387C9;padding-left: 15px;padding-right: 15px;}
.lay_tab .laytab_list:first-child{border-left:1px solid #B5B5B5;}
.layper_tab{float: left;width: 100%;margin-top: 20px;}
.from_center{width: 790px;margin: 0px auto;min-height:160px;}
.lay_from{float: left;width: 580px;margin-bottom: 12px;}
.lay_from_name{width:200px;font-size: 14px;float: left;line-height: 32px;margin-right: 15px;}
.red_star{color: #ff0000;float: right;font-size: 16px;margin-right: 5px;}
.two_name{float: right;width: 56px;text-align:justify; }
.three_name{float: right;width: 56px;text-align:justify; }
.lay_from_ipt{width: 360px;float: left;font-size: 14px;}
.lay_from_ipt .lay_wipt{width: 360px;height: 32px;border: 1px solid #B5B5B5;outline: none;padding-left:10px ;padding-right: 10px;}
.lay_from_ipt input[type='radio']{margin-left: 0px;width: 14px;height: 14px;float: left;margin-top: 9px;}
.lay_from_ipt label{line-height: 32px;float: left;}
.lay_from_ipt label.lay_label{line-height: 32px;float: left;margin-right: 20px;margin-left: 5px;}
.default_name{float: right;}
.tip_layinput{float: left;line-height: 32px;color: #aaa;font-size: 14px;}
.lay_date{width: 360px;height: 32px;border: 1px solid #B5B5B5;outline: none;padding-left:10px ;background: url(../img/laydate.png) no-repeat 330px;padding-right: 28px;font-size: 14px;}
.lay_from_ipt select{width: 360px;height: 32px;border: 1px solid #B5B5B5;}
.lay_from_ipt textarea{width: 360px;height: 104px;border: 1px solid #B5B5B5;line-height: 26px;outline: none;resize: none;padding-left: 10px;padding-right: 10px;}
.lay_from .lay_save{background: #3387C9;color: #fff;border: 1px solid #3387C9;width: 90px;font-size: 14px;height: 32px;border-radius: 5px 5px;margin-left: 350px;}
.per_img{width: 128px;height: 150px;}
.id_photo{float: right;width: 160px;text-align: center;}
.img_center_txt{float: left;width: 100%;color: #AAAAAA;font-size: 14px;margin-top: 10px;line-height: 32px;}
.img_center_txts{font-size: 12px;float: left;width: 100%;color: #AAAAAA;}
.political_outlook,.family_infor,.contact_infor,.layper_tabthree,.layper_tabfive,.spechobby_infor,.stu_cadre,.chairman_infor{display: none;}
.lay_right_btn{float: right;margin-bottom: 15px;}
.all_del_btn{background: #ff5722;float: left;width: 82px;border: 1px solid #ff5722;color: #fff;font-size: 14px;height: 28px;margin-right: 18px;}
.lay_add_btn{background: #26a69a;float: left;width: 82px;border: 1px solid #26a69a;color: #fff;font-size: 14px;height: 28px;}
.lay_vitae_template{background: #eaa80b;float: left;width: 82px;border: 1px solid #eaa80b;color: #fff;font-size: 14px;height: 28px;margin-right: 18px}
.template_cont{
background: url(../img/bg_resume.png);width: 898px;position: absolute;height: 308px;
right:33px;margin-top: 33px;padding-top: 30px;padding-left: 18px;padding-right: 18px;
display: none;
}
.template_center{background: #fff;width: 100%;float: left;font-size: 14px;padding: 10px;}
.template_list{float: left;width: 100%;font-size: 13px;line-height: 24px;}
.template_name{float: left;width: 120px;font-size: 13px;}
.template_txt{float: left;font-size: 13px;margin-left:10px ;width: 705px;text-align: justify;}
.per_table{width: 100%;border: 1px solid #B5B5B5;}
.table_area{width: 100%;}
.per_table tr td,.per_table th td{border: 1px solid #B5B5B5;text-align: center;height: 34px;font-size: 14px;}
.appellation_ipt{width: 120px;float: left;}
.per_table input[type="text"]{width: 100%;height: 100%;font-size: 14px;}
.per_table input.tab_date{
width: 99%;height: 32px;outline: none;padding-left:10px ;
background: #fff url(../img/laydate.png) no-repeat right;
padding-right: 28px;font-size: 14px;
}
.lay_tabnum{width: 30px;float: left;}
.tab_del{background: #3387C9;color: #fff;border: 1px solid #3387C9;width: 60px;font-size: 14px;height: 24px;margin-left:5px ;margin-right: 5px;}
.taball_checkbox{width: 19px;float: left;margin-left: 3px;margin-right: 3px;}
.taball_checkbox input[type="checkbox"]{margin-left: 0px;}
.tab_btnarea{width: 100%;text-align: center;margin-top: 20px;margin-bottom: 10px;}
.tab_save{background: #3387C9;color: #fff;border: 1px solid #3387C9;width: 90px;font-size: 14px;height: 32px;border-radius: 5px 5px;}
.textarea_title{float: left;width: 100%;font-size: 14px;}
.vitae_textarea{float: left;width: 100%;font-size: 14px;height: 182px;line-height: 26px;padding: 10px;margin-top: 15px;}
/*.last_btn_area{width: 99%;}
.last_btn{width: 200px;margin: 0px auto;margin-top:30px;display: none;}
.preview_btn{
background: #3387C9;color: #fff;
border: 1px solid #3387C9;
width: 90px;
font-size: 14px;
height: 32px;
border-radius: 5px 5px;
}
.submit_btn{
background: #F0262F;color: #fff;
border: 1px solid #F0262F;
width: 90px;
font-size: 14px;
height: 32px;
border-radius: 5px 5px;margin-left:15px;
}*/
.tip_layres{font-size: 14px;color: #aaa;width: 100%;margin-bottom: 15px;}
.yesno_radio{float: left;width: 100%;}
.radio_name{float: left;line-height: 32px;margin-right: 15px;font-size: 14px;color: #333;}
.radio_name span{float: right;}
.radio_ipt input[type='radio']{margin-left: 0px;width: 14px;height: 14px;float: left;margin-top: 9px;}
.radio_ipt label{line-height: 32px;float: left;}
.radio_ipt label.lay_label{line-height: 32px;float: left;margin-right: 20px;margin-left: 5px;}
/*上传证件照 action*/
div.container{padding-left: 0;padding-right: 0;}
div.row{margin-left: 0;margin-right: 0;}
.padding0{padding-left: 0;padding-right:0;}
.bomb_box{width:350px;height:450px;margin:100px auto;background-color:#FFFFFF;overflow: hidden;border-radius:4px;}
.clipArea{height: 350px;}
.img_con{height:56px;line-height:36px;text-align: center;padding-top:8px;}
.ycuplod_area{min-height:1px;line-height:160px;text-align:center;position:relative;}
.cover-wrap{display:none;position:fixed;left:0;top:0;width:100%;height:100%;background: rgba(0, 0, 0, 0.4);z-index: 10000000;text-align:center;}
.img_center_area{
width:128px;height:150px;border-radius: 4px;background:url(../img/lay_img.png);margin-left: 19px;
color: #FFFFFF;font-size: 14px;text-align:center;line-height:32px;outline:none;position:relative;
}
.img_view{width:128px;height:150px;}
.clip_btn_tip{width: 100%;text-align: center;font-size: 14px;color: #aaa;}
.clipbtn{
width:100px;height: 32px;border-radius: 4px;background-color:#3387c9;color: #FFFFFF;
font-size: 14px;text-align: center;line-height: 32px;outline: none;border: 1px solid #3387c9;
}
.file_photo_img{cursor:pointer;opacity:0;filter:alpha(opacity=0);width:100%;height:100%;position:absolute;top:0;left:0;}
/*上传证件照 end*/
