<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
<th:block th:include="include :: header('新增')"/>
<style>
/*定义表格样式开始*/
table {
table-layout: fixed;
empty-cells: show;
border-collapse: collapse;
margin: 0 auto;
}
.table {
font-size: 13px;
border: 1px solid #cad9ea;
color: #666;
}
.table thead {
background-color: #eaf2ff;
}
.table th {
background-repeat: repeat-x;
}
.table td {
height: 30px;
}
.table td,
.table th {
border: 1px solid #ddd;
padding: 0 3px 0;
text-align: center;
}
.table tr:nth-child(even) {
background-color: #f5fafe;
}
.table .reds {
position: relative;
top: 6px;
left: 3px;
font-size: 20px;
color: red;
}
.ftVal {
cursor: pointer;
width: 100%;
}
.table > tbody > tr > td {
padding: 2px 4px;
}
.tbth tbody tr th {
width: 100px;
background-color: #eaf2ff;
}
.tbth tbody tr td {
background-color: #fafafa;
}
.tbth tbody tr td input {
border: 0px;
}
/*表格默认样式结束*/
/*户信息样式开始*/
.pNum {
width: 30px;
display: inline-block;
border: 1px solid #838a9d;
height: 20px;
line-height: 20px;
text-align: center;
margin: auto 4px;
border-radius: 2px;
font-weight: bold;
color: #838a9d;
}
.huInfo {
width: 100%;
margin-top: 40px;
margin-bottom: 6px;
height: 28px;
border-style: solid;
border-top-width: 0px;
border-right-width: 0px;
border-bottom-width: 0px;
border-left-width: 5px;
border-color: #1E9FFF;
}
.huInfo div {
height: 30px;
line-height: 30px;
display: inline-block;
width: 49%;
}
.huInfo:first-child {
}
.huInfo div:last-child {
text-align: right;
}
.chengYuanInfo {
width: 100%;
margin-bottom: 6px;
height: 28px;
border-style: solid;
border-top-width: 0px;
border-right-width: 0px;
border-bottom-width: 0px;
border-left-width: 5px;
border-color: #1E9FFF;
}
/*户信息样式结束*/
/*成员信息*/
.cyxx {
text-align: left;
font-size: 15px !important;
font-weight: bold;
padding: 5px 10px;
}
/*消除bootstrap.css对lengend的影响*/
legend {
margin: 0px;
border: 0px;
width: auto;
}
</style>
</head>
<body>
<div style="width: 80%; margin: 0 auto;">
<div class="huInfo">
<div> <strong>户信息</strong> <span>共计<span class="pNum">1</span>人</span></div>
<div>
<button type="button" class="layui-btn layui-btn-primary layui-btn-sm">上一户</button>
<button type="button" class="layui-btn layui-btn-primary layui-btn-sm">下一户</button>
</div>
</div>
<table class="table tbth">
<tbody>
<tr>
<th>所属组织</th>
<td><input name="" type="text" class="form-control" aria-required="true"/></td>
<th>户号</th>
<td><input name="" type="text" placeholder="身份证号必填" class="form-control" aria-required="true"/></td>
</tr>
<tr>
<th>户主姓名</th>
<td><input name="" type="text" class="form-control" aria-required="true"/></td>
<th>身份证号</th>
<td><input name="" type="text" placeholder="身份证号必填" class="form-control" aria-required="true"/></td>
</tr>
<tr>
<th>家庭住址</th>
<td colspan="3"><input name="" type="text" class="form-control" aria-required="true"/></td>
</tr>
</tbody>
</table>
<div class="chengYuanInfo">
<label class="layui-form-label cyxx">成员信息</label>
<div class="layui-btn-group" style="float: right; margin-right: 13px;">
<button type="button" class="layui-btn layui-btn-primary layui-btn-sm"><i class="layui-icon"></i>变更身份
</button>
<button type="button" class="layui-btn layui-btn-primary layui-btn-sm"><i class="layui-icon">ဆ</i>取消身份
</button>
<button type="button" class="layui-btn layui-btn-primary layui-btn-sm"><i class="layui-icon"></i>删除
</button>
</div>
</div>
<form>
<div class="form-group">
<table width="90%" class="table tb">
<thead>
<tr>
<th style="width: 40px;" class="selAll" οnclick="selectAll()"><input name="" type="checkbox"
class="form-control"
aria-required="true"/>全选
</th>
<th>姓名<span class="reds">*</span></th>
<th>与户主关系<span class="reds">*</span></th>
<th>身份证号<span class="reds">*</span></th>
<th>出生日期<span class="reds">*</span></th>
<th style="width: 60px;">性别</th>
<th>户籍是</th>
<th>来源</th>
<th>取得</th>
<th>本集</th>
<th>履行</th>
<th>取得</th>
<th>备注</th>
<th style="width: 60px;">操作</th>
</tr>
</thead>
<tbody>
<tr>
<td class="selAll"><input name="" type="checkbox" class="form-control" aria-required="true"/></td>
<td><input name="" type="text" placeholder="姓名必填" class="form-control" aria-required="true"/></td>
<td>
<select class="form-control">
<option value="请选择">请选择</option>
<option value="huzhu">户主</option>
<option value="erzi">子</option>
<option value="nver">女儿</option>
<option value="qizi">妻子</option>
</select>
</td>
<td><input name="" type="text" placeholder="身份证号必填" class="form-control" aria-required="true"/></td>
<td><input name="" type="text" placeholder="出生日期必填" class="form-control" id="birthday"
aria-required="true"/></td>
<td><input type="checkbox" class="form-check-input" value="男"/> 男<br/>
<input type="checkbox" class="form-check-input" value="女"/> 女
</td>
<td><input type="checkbox" class="form-check-input" value="是"/> 是<br/>
<input type="checkbox" class="form-check-input" value="否"/> 否
</td>
<td><input type="checkbox" class="form-check-input" value="是"/> 是<br/>
<input type="checkbox" class="form-check-input" value="否"/> 否
</td>
<td><input type="checkbox" class="form-check-input" value="是"/> 是<br/>
<input type="checkbox" class="form-check-input" value="否"/> 否
</td>
<td><input type="checkbox" class="form-check-input" value="是"/> 是<br/>
<input type="checkbox" class="form-check-input" value="否"/> 否
</td>
<td><input type="checkbox" class="form-check-input" value="是"/> 是<br/>
<input type="checkbox" class="form-check-input" value="否"/> 否
</td>
<td>
<select class="form-control">
<option value="请选择">请选择</option>
<option value="1" data-select2-id="1">取得</option>
<option value="2" data-select2-id="2">取得</option>
<option value="4" data-select2-id="3">取得</option>
<option value="5" data-select2-id="4">保留</option>
</select>
</td>
<td><textarea class="form-control" rows="2" id="comment"></textarea></td>
<td><span class="ftVal" οnclick="adds(this)">添加</span></td>
</tr>
</tbody>
</table>
</div>
</form>
<div></div>
<div class="liness">
<fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
<legend>简约时间线:大事记</legend>
</fieldset>
<ul class="layui-timeline">
<li class="layui-timeline-item">
<i class="layui-icon layui-timeline-axis"></i>
<div class="layui-timeline-content layui-text">
<div class="layui-timeline-title">2018年,layui 5.0 发布。并发展成为中国最受欢迎的前端UI框架(期望)</div>
</div>
</li>
<li class="layui-timeline-item">
<i class="layui-icon layui-timeline-axis"></i>
<div class="layui-timeline-content layui-text">
<div class="layui-timeline-title">2017年,layui 里程碑版本 2.0 发布</div>
</div>
</li>
<li class="layui-timeline-item">
<i class="layui-icon layui-timeline-axis"></i>
<div class="layui-timeline-content layui-text">
<div class="layui-timeline-title">2016年,layui 首个版本发布</div>
</div>
</li>
<li class="layui-timeline-item">
<i class="layui-icon layui-timeline-axis"></i>
<div class="layui-timeline-content layui-text">
<div class="layui-timeline-title">2015年,layui 孵化</div>
</div>
</li>
<li class="layui-timeline-item">
<i class="layui-icon layui-anim layui-anim-rotate layui-anim-loop layui-timeline-axis"></i>
<div class="layui-timeline-content layui-text">
<div class="layui-timeline-title">更久前,轮子时代。维护几个独立组件:layer等</div>
</div>
</li>
</ul>
</div>
</div>
</body>
<th:block th:include="include :: footer"/>
<script>
// 追加行
function adds(that) {
$(that).parent().parent().clone(true).appendTo(".tb tbody"); //克隆元素和事件
$(".tb tbody tr:not(:last)").find("span").attr("onclick", "dels(this)").html("删除"); //除去最后一个元素,其他元素的事件全部替换
}
//删除行
function dels(that) {
$(that).parent().parent().remove();
}
//使用laydate
layui.use('laydate', function () {
var laydate = layui.laydate;
//常规用法
laydate.render({
elem: '#birthday'
});
})
$(function () {
// 多行复选变单选
$(":checkbox").click(function () {
if ($(this).attr("checked") != '')
$(this).siblings().attr("checked", false);
$(this).attr("checked", 'checked');
});
})
//全选操作
function selectAll() {
$(".selAll input[type='checkbox']").each(function () {
if ($(this).prop("checked") == true) {
$(".selAll input[type='checkbox']").prop('checked', true);
} else {
$(".selAll input[type='checkbox']").prop('checked', false);
}
});
}
</script>
</html>