<!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>