<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>题目4：社員基本情報一覧画面</title>
<style type="text/css">
table,tr,th,td {
border:1.5px solid rgb(0, 0, 0);
cellpadding: "0";
cellspacing: "0";
}
#dataTb td{
padding:5px;
}
table {
border-collapse:collapse;
}
form {
position:relative;
left:50%;
width:800px;
height:700px;
margin-left:-200px;
display: block;
}
#background {
background-image: url(./SU.png);
background-size: 100% 70%;
background-repeat: no-repeat;
background-position:100px 0px;
width:900px;
height:900px;
}
</style>
</head>
<body>
<div id="background">
<form>
<div class="search">
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
姓名
<input type="text" id="searchKey">
<input type="button" onclick="renderData()" value="社員検索">
</div>
<br>
<div>
<table id="dataTb">
<thead align="center">
<tr>
<th>社員番号</th>
<th>姓名</th>
<th>生年月日</th>
<th>国籍</th>
<th>性别</th>
<th colspan="2">操作</th>
</tr>
</thead>
</table>
</div>
<br>
<div>
<table id="editTb">
<tr>
<th>
社員番号
</th>
<td>
<input type="text" id="number">
</td>
</tr>
<tr>
<tr>
<th>
姓名
</th>
<td>
<input type="text" id="name">
</td>
</tr>
<tr>
<th>
生年月日
</th>
<td>
<input type="text" id="brithday">
</td>
</tr>
<tr>
<th>
国籍
</th>
<td>
<input type="text" id="country">
</td>
</tr>
<tr>
<th>
性别
</th>
<td>
<input type="text" id="sex">
</td>
</tr>
</table>
<input type="button" onclick="submitEdit()" value="確認">
</div>
</form>
</div>
</body>
<script>
var datas=[{
id:1,
number:'11111',
name:'山田花子',
nation:'日本',
brithday:'1990-01-12',
gender:'女性'
},{
id:2,
number:'2222',
name:'彭于晏',
nation:'中国',
brithday:'1990-01-12',
gender:"男性"
}]
var showData=null;
let dataTb = document.getElementById("dataTb");
let editTb = document.getElementById("editTb");
let editItem = null
let inputs = document.querySelectorAll('#editTb input');
let editForm = {
number:inputs[0],
name:inputs[1],
brithday:inputs[2],
nation:inputs[3],
gender:inputs[4]
}
function renderData(){
deleteAllRow()
let keyWord = document.getElementById("searchKey").value
showData= JSON.parse(JSON.stringify(datas))
if(null!=keyWord&&keyWord!=''){
showData= showData.filter(item=>item.name.indexOf(keyWord)>=0)
}
showData.forEach((item,index)=>{
addRow(item,index)
});
}
function deleteAllRow(){
let rowCount=dataTb.rows.length;
for (i=1;i<rowCount;i++){
dataTb.deleteRow(i);
rowCount=rowCount-1;
i=i-1;
}
}
function addRow(data,index){
let oTr = dataTb.insertRow(index+1);
let oTd = oTr.insertCell();
oTd.innerHTML = data.number;
oTd = oTr.insertCell();
oTd.innerHTML = data.name;
oTd = oTr.insertCell();
oTd.innerHTML = data.brithday
oTd = oTr.insertCell();
oTd.innerHTML = data.gender
oTd = oTr.insertCell();
oTd.innerHTML = data.nation;
oTd = oTr.insertCell();
oTd.dataset.id = index
oTd.onclick = function(){
let ind = parseInt(this.dataset.id)
datas.splice(ind, 1)
renderData()
}
oTd.innerHTML = '削除';
oTd = oTr.insertCell();
oTd.dataset.id = index
oTd.onclick = function(){
editItem = datas[parseInt(this.dataset.id)]
edit()
}
oTd.innerHTML = '変更';
}
function edit(){
editForm.number.value = editItem.number
editForm.name.value = editItem.name
editForm.nation.value = editItem.nation
editForm.gender.value=editItem.gender
editForm.brithday.value=editItem.brithday
}
function submitEdit(){
editItem.number = editForm.number.value
editItem.name = editForm.name.value
editItem.nation = editForm.nation.value
editItem.gender=editForm.gender.value
editItem.brithday=editForm.brithday.value
renderData()
}
window.onload=function(){
renderData()
}
</script>
</html>