表格改弹窗界面 | Modal表单使用Layui+js开发
Modal表单使用Layui+js开发
公司需求求职登记表不使用table,计划用一个iframe弹框解决问题,但是iframe弹窗难以解决不同文件的传值问题,多方搜索,应用Modal开发。
样式如下
用Layui实现的表单
代码如下
// An highlighted block
<!-- 模态框（Modal）1 -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog" style="width:500px">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">
×
</button>
<h4 class="modal-title" id="myModalLabel">
添加工作经历
</h4>
</div>
<div class="modal-body">
<!-- layui部分 -->
<div class="layui-form layui-form-pane">
<div class="layui-inline">
<label class="layui-form-label">工作时间</label>
<div class="layui-input-inline" >
<input name="gzsj" id="gzsj" autocomplete="off" class="layui-input" type="text" placeholder="请选择您的工作时间">
</div>
</div>
<div class="layui-inline">
<label class="layui-form-label">单位名称</label>
<div class="layui-input-inline" >
<input name="dwmc" id="dwmc" lay-verify="name" autocomplete="off" class="layui-input" type="text" placeholder="请输入您的单位名称">
</div>
</div>
<div class="layui-inline">
<label class="layui-form-label">岗位</label>
<div class="layui-input-inline" >
<input name="gangwei" id="gangwei" lay-verify="name" autocomplete="off" class="layui-input" type="text" placeholder="请输入您的岗位">
</div>
</div>
<div class="layui-form-item layui-form-text">
<label class="layui-form-label">岗位职责及工作内容</label>
<div class="layui-input-block">
<textarea id="gznr" name ="gznr" class="layui-textarea" style="resize:none;"></textarea>
</div>
<div class="layui-form-item layui-form-text">
<label class="layui-form-label">离职原因</label>
<div class="layui-input-block">
<textarea id="lzyy" name ="lzyy" class="layui-textarea" style="resize:none;"></textarea>
</div>
<div class="layui-form-item layui-form-text" >
<label class="layui-form-label">对自己在公司的业绩是否满意</label>
<div class="layui-input-block">
<textarea id="gsyj" name ="gsyj" class="layui-textarea" style="resize:none;"></textarea>
</div>
<br>
</div>
<!-- <table class="layui-table" id="list_tab" align="center" style="width:100%;border:0;border-collapse:collapse;cellspacing:0;cellpadding:0;" >
<colgroup>
<col width="80">
<col width="80">
<col>
</colgroup>
<thead>
<tr>
<th>具体工作时间</th>
<th>单位名称</th>
<th>岗位</th>
<th>岗位职责及工作内容</th>
<th>离职原因</th>
<th>对自己在公司的业绩是否满意</th>
</tr>
</thead>
<tbody>
<tr>
<td><input name="gzsj" ></input></td>
<td><input name="dwmc" ></input></td>
<td><input name="gangwei" ></input></td>
<td><input name="gznr" ></input></td>
<td><input name="lzyy" ></input></td>
<td><input name="gsyj" ></input></td>
</tr>
<tr>
<td><input name="gzsj2" ></input></td>
<td><input name="dwmc2" ></input></td>
<td><input name="gangwei2" ></input></td>
<td><input name="gznr2" ></input></td>
<td><input name="lzyy2" ></input></td>
<td><input name="gsyj2" ></input></td>
</tr>
<tr>
<td><input name="gzsj3" ></input></td>
<td><input name="dwmc3" ></input></td>
<td><input name="gangwei3" ></input></td>
<td><input name="gznr3" ></input></td>
<td><input name="lzyy3" ></input></td>
<td><input name="gsyj3" ></input></td>
</tr>
</tbody>
</table> -->
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">关闭
</button>
<button type="button" class="btn btn-primary" id="submitwork" data-dismiss="modal">
<!-- data-dismiss="modal"提交后关闭 -->
提交工作经历
</button>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal -->
</div>
<script>
// 获取Modal数据
var submitwork=document.getElementById('submitwork');
submitwork.onclick=function(){
//1.取输入框内的值
var gzsj = document.getElementById('gzsj').value;
console.log(gzsj);
var gzsj=$("#gzsj").val();
$("#gzsj").val("");
var dwmc=document.getElementById('dwmc').value;
var dwmc=$("#dwmc").val();
$("#dwmc").val("");
console.log(dwmc);
var gangwei=document.getElementById('gangwei').value;
var gangwei=$("#gangwei").val();
$("#gangwei").val("");
console.log(gangwei);
var gznr=document.getElementById('gznr').value;
var gznr=$("#gznr").val();
$("#gznr").val("");
console.log(gznr);
var lzyy=document.getElementById('lzyy').value;
var lzyy=$("#lzyy").val();
$("#lzyy").val("");
console.log(lzyy);
var gsyj=document.getElementById('gsyj').value;
var gsyj=$("#gsyj").val();
$("#gsyj").val("");
console.log(gsyj);
// console.log(gzsj+dwmc+gangwei+gznr+lzyy+gsyj);
row = document.getElementById("worktable").insertRow();
if(row!=null){
// cell.innerHTML=gzsj;
// 调用数据是用request.getParameterValue();
cell=row.insertCell();
if(gzsj.length == 0 ){
gzsj = " ";
}
cell.innerHTML=gzsj+'<input name="gzsj" type="hidden" value='+gzsj +' ></input>';
cell = row.insertCell();
if(dwmc.length == 0 ){
dwmc = " ";
}
cell.innerHTML=dwmc+'<input name="dwmc" type="hidden" value='+dwmc +'></input>';
cell = row.insertCell();
if(gangwei.length == 0 ){
gangwei = " ";
}
cell.innerHTML=gangwei+'<input name="gangwei" type="hidden" value='+gangwei +' ></input>';
cell=row.insertCell();
if(gznr.length == 0 ){
gznr = " ";
}
cell.innerHTML=gznr+'<input name="gznr" type="hidden" value='+gznr +' ></input>';
cell=row.insertCell();
if(lzyy.length == 0 ){
lzyy = " ";
}
cell.innerHTML=lzyy+'<input name="lzyy" type="hidden" value='+lzyy +' ></input>';
cell=row.insertCell();
cell.innerHTML=gsyj+'<input name="gsyj" type="hidden" value='+gsyj +' "></input>';
cell=row.insertCell();//添加删除按钮
cell.innerHTML=' <button id="deleteTabeRow" type="button" onclick="deleteRow()"><i class="layui-icon layui-icon-delete" ></i> </button> ';
layer.msg('添加成功');
}
}