|
|
<!DOCTYPE html>
|
|
|
<html xmlns:th="http://www.thymeleaf.org">
|
|
|
<html lang="en">
|
|
|
<head>
|
|
|
<meta charset="UTF-8">
|
|
|
<title>Title</title>
|
|
|
|
|
|
<style>
|
|
|
*{
|
|
|
margin: 0;
|
|
|
padding: 0;
|
|
|
}
|
|
|
body{
|
|
|
display:flex;
|
|
|
justify-content: center;
|
|
|
align-items: center;
|
|
|
padding: 150px;
|
|
|
background-color: ivory;
|
|
|
}
|
|
|
#box{
|
|
|
display:flex;
|
|
|
justify-content:center;
|
|
|
align-items: center;
|
|
|
width: 100%;
|
|
|
height: 100%;
|
|
|
background-color: ivory;
|
|
|
flex-direction: column;
|
|
|
padding: 150px;
|
|
|
}
|
|
|
|
|
|
#head{
|
|
|
width: 1200px;
|
|
|
height: 100px;
|
|
|
display:flex;
|
|
|
justify-content: center;
|
|
|
align-items: center;
|
|
|
/* background-color: aqua; */
|
|
|
|
|
|
}
|
|
|
#head table{
|
|
|
border-collapse: collapse;
|
|
|
}
|
|
|
|
|
|
td{
|
|
|
|
|
|
text-align: center;
|
|
|
vertical-align: center;
|
|
|
background-color:rgba(255,255,255,0.5);
|
|
|
border: 1px solid black;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
#content {
|
|
|
width: 1200px;
|
|
|
/* height: 800px; */
|
|
|
display:flex;
|
|
|
justify-content: center;
|
|
|
align-items: center;
|
|
|
flex-direction: column;
|
|
|
/* background-color: red; */
|
|
|
/* z-index: -1; */
|
|
|
}
|
|
|
#content table{
|
|
|
border-collapse: collapse;
|
|
|
}
|
|
|
#content table tr{
|
|
|
background-color: bisque;
|
|
|
}
|
|
|
|
|
|
#operator{
|
|
|
display:flex;
|
|
|
justify-content: space-evenly;
|
|
|
align-items: center;
|
|
|
width: 1200px;
|
|
|
}
|
|
|
#operator input{
|
|
|
border: 1px solid rgb(223, 254, 252) ;
|
|
|
background-color: rgb(223, 254, 252);
|
|
|
height:50px;
|
|
|
width: 125px;
|
|
|
border-radius: 15%;
|
|
|
font-size:2.5ch;
|
|
|
font-family: 'Courier New', Courier, monospace;
|
|
|
margin-top: 20px;
|
|
|
}
|
|
|
|
|
|
|
|
|
</style>
|
|
|
|
|
|
</head>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<!-- 可以设计成两边 一边是姓名和电话 ，另一边就是具体的一些信息，就像Maa那样 -->
|
|
|
<body>
|
|
|
<!-- 先做出来一个表格-->
|
|
|
<main id="box">
|
|
|
<!-- 在这里增加三个按钮-->
|
|
|
<div id="operator">
|
|
|
<input type="button" value="增加联系人">
|
|
|
<input type="button" value="删除联系人">
|
|
|
<input type="button" value="查找联系人">
|
|
|
</div>
|
|
|
|
|
|
|
|
|
<!-- 这里是首行，我们要在这里增加我们对应的显示功能 -->
|
|
|
<div id="head">
|
|
|
<!-- <span>账号</span> -->
|
|
|
<table>
|
|
|
<tr>
|
|
|
<td>姓名</td>
|
|
|
<td>联系电话</td>
|
|
|
<td>邮箱</td>
|
|
|
<td>地址</td>
|
|
|
<td>社交账号</td>
|
|
|
<td>公司名称</td>
|
|
|
<td>职位</td>
|
|
|
<td>标记</td>
|
|
|
<td>生日</td>
|
|
|
<td>爱好</td>
|
|
|
</tr>
|
|
|
</table>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<div id="content">
|
|
|
<table th:each="data:${user_data}">
|
|
|
<tr>
|
|
|
<!-- <span th:text="${data.txl_account}"></span> -->
|
|
|
<td th:text="${data.txl_name}"></td>
|
|
|
<td th:text="${data.txl_contact_phone_number}"></td>
|
|
|
<td th:text="${data.txl_email}"></td>
|
|
|
<td th:text="${data.txl_address}"></td>
|
|
|
<td th:text="${data.txl_social_media_account}"></td>
|
|
|
<td th:text="${data.txl_company_name}"></td>
|
|
|
<td th:text="${data.txl_position}"></td>
|
|
|
<td th:text="${data.txl_remarks}"></td>
|
|
|
<td th:text="${data.txl_birthday}"></td>
|
|
|
<td th:text="${data.txl_hobbies}"></td>
|
|
|
<!-- <td>账号</td> -->
|
|
|
<!-- <td>姓名</td>
|
|
|
<td>联系电话</td>
|
|
|
<td>邮箱</td>
|
|
|
<td>地址</td>
|
|
|
<td>社交账号</td>
|
|
|
<td>公司名称</td>
|
|
|
<td>职位</td>
|
|
|
<td>标记</td>
|
|
|
<td>生日</td>
|
|
|
<td>爱好</td> -->
|
|
|
</tr>
|
|
|
|
|
|
</table>
|
|
|
</div>
|
|
|
</main>
|
|
|
</body>
|
|
|
<script>
|
|
|
// var widths = [100,100,100,100,100,100,100,100,100,100,100];
|
|
|
var widths = [100,100,100,100,100,100,100,100,100,100];
|
|
|
|
|
|
var head = document.querySelector("#head table tr");
|
|
|
for(var num = 0; num < widths.length; ++num){
|
|
|
head.children[num].style.width = widths[num] + 'px';
|
|
|
head.children[num].style.height = widths[num] + 'px';
|
|
|
// head.children[num].style.borderCollapse = "collapse";
|
|
|
|
|
|
}
|
|
|
|
|
|
//到时候渲染，就要先找到 div,ul,li 才行
|
|
|
// var head = document.querySelector("li");
|
|
|
var lis = document.querySelectorAll("#content table tr");
|
|
|
// console.log(lis)
|
|
|
for(var item = 0; item < lis.length; ++item){
|
|
|
var cur = lis[item];
|
|
|
// console.log(cur)
|
|
|
// console.log(cur.childElementCount)
|
|
|
for(var num = 0; num < cur.childElementCount; ++num){
|
|
|
cur.children[num].style.width = widths[num] + 'px';
|
|
|
cur.children[num].style.height = widths[num] + 'px';
|
|
|
// cur.children[num].style.borderCollapse = "collapse";
|
|
|
}
|
|
|
}
|
|
|
|
|
|
var tables = document.querySelectorAll("#content table");
|
|
|
console.log(tables);
|
|
|
for(var index = 0; index < tables.length; ++index){
|
|
|
tables[index].style.borderCollapse="collapse";
|
|
|
}
|
|
|
|
|
|
var inputs = document.querySelectorAll("#operator input");
|
|
|
inputs[0].addEventListener("click",function(){
|
|
|
window.location.href = "add_user_data";
|
|
|
})
|
|
|
inputs[1].addEventListener("click",function(){
|
|
|
window.location.href = "delete_user_data";
|
|
|
})
|
|
|
inputs[2].addEventListener("click",function(){
|
|
|
window.location.href = "find_user_data";
|
|
|
})
|
|
|
|
|
|
|
|
|
</script>
|
|
|
</html> |
