效果圖在最下面哦
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<style>
.box {
width: 400px;
height: 400px;
border: 5px solid pink;
}
#messageTable {
position: absolute;
top: 0;
left: 40%;
width: 500px;
margin: 0 auto;
}
/* tr th{
width: 300px;
} */
p {
font-size: 30px;
transform: translateX(20px);
}
.inp {
width: 250px;
height: 40px;
outline: none;
border-radius: 5px;
font-size: 30px;
}
#btn {
background-color: lightseagreen;
border-radius: 5px;
width: 100px;
height: 30px;
transform: translateX(150px);
}
td {
text-align: center;
}
#box2{
position: absolute;
left: 75%;
top: 0;
}
</style>
<body>
<form class="box" action="">
<p>姓名:<input type="text" class="inp"></p>
<p>年齡:<input type="text" class="inp"></p>
<p>性別:<input type="text" class="inp"></p>
<p>學號:<input type="text" class="inp"></p>
<input type="button" id="btn" value="提交"></input>
</form>
<table id="messageTable" border="" cellspacing="" cellpadding="">
<tr>
<th>序號</th>
<th>姓名</th>
<th>年齡</th>
<th>性別</th>
<th>學號</th>
<th>操作</th>
</tr>
</table>
<div id="box2">
<input id="input2" type="text"><button id="btn2">搜索</button>
</div>
<script>
var inps = document.getElementsByClassName('inp');
var btn = document.getElementById('btn');
var table = document.getElementById('messageTable');
//創建一個表量儲存序號
// var num = 1;
//創建新陣列
var sz = [];
var arr = [];
var obj = true;
btn.onclick = function () {
if (!obj) {
console.log("編輯");
//將獲取到的值存入物件中
var str = {
name: inps[0].value,
age: inps[1].value,
sex: inps[2].value,
stuid: inps[3].value
}
//input非空驗證
for (var i = 0; i < inps.length; i++) {
if (inps[i].value.trim() == "" || inps[i].value.trim() == null || inps[i].value.trim() == undefined) {
alert("請輸入完整的資訊")
return false;
}
}
for (var i = 0; i < arr.length; i++) {
if (arr[i].stuid == str.stuid) {
arr.splice(i, 1, str);
}
}
var trs = document.querySelectorAll("tr");
for (var i = 1; i < trs.length; i++) {
if (str.stuid == trs[i].children[4].children[0].value) {
trs[i].children[1].innerHTML = str.name;
trs[i].children[2].innerHTML = str.age;
trs[i].children[3].innerHTML = str.sex;
trs[i].children[4].innerHTML = str.stuid;
var edits = trs[i].querySelector(".edits");
var saves = trs[i].querySelector(".saves");
saves.style.display = "none";
edits.style.display = "block";
}
}
delNull();
} else {
var str = {
name: inps[0].value,
age: inps[1].value,
sex: inps[2].value,
stuid: inps[3].value
}
for (var i = 0; i < inps.length; i++) {
if (inps[i].value.trim() == "" || inps[i].value.trim() == null || inps[i].value.trim() == undefined) {
alert("請輸入完整的資訊")
return false;
}
}
//將用戶輸入的學號與新陣列中儲存的學號對比如果存在則洗掉反之存入新陣列
if (arr.length > 0) {
for (var i = 0; i < arr.length; i++) {
if (arr[i].stuid == str.stuid) {
alert("學號重復,請重新輸入")
return false;
}
}
arr.push(str)
} else {
arr.push(str)
}
//創建tr標簽
var trs = document.createElement("tr");
//將tr標簽添加到表格中
table.appendChild(trs);
//創建存盤序號的單元格
var a = document.createElement("td");
a.innerHTML = arr.length;
//將存盤序號的單元格添加到tr中
trs.appendChild(a);
//獲取用戶輸入的值并將其添加到表格中
for (var i = 0; i < inps.length; i++) {
var tds = document.createElement("td");
trs.appendChild(tds);
tds.innerHTML = inps[i].value;
}
var del = document.createElement('td');
del.innerHTML = "<button οnclick='dels(this)'>洗掉</button>";
trs.appendChild(del);
var bj = document.createElement("td");
bj.innerHTML = "<button class='edits' οnclick='edits(this)'>編輯</button><button class='saves' style='display: none;' οnclick='save(this)'>保存</button>"
trs.appendChild(bj);
delNull();
}
}
//序號修改
function updateview() {
var trs = document.querySelectorAll("tr");
for (var i = 1; i < trs.length; i++) {
trs[i].children[0].innerHTML = i;
}
}
function dels(e) {
var fuIndex = e.parentNode.parentNode;
// console.log(fuIndex);
fuIndex.remove();
for (var i = 0; i < arr.length; i++) {
if (arr[i].stuid == fuIndex.children[4].innerHTML) {
arr.splice(i, 1);
}
}
updateview();
}
//編輯
function edits(e) {
var bjtr = e.parentNode.parentNode;
for (var i = 1; i < 5; i++) {
var inputs = document.createElement('input');
inputs.setAttribute("type", "text");
if (i == 4) {
inputs.setAttribute("disabled", "true")
}
inputs.style.width = "40%";
inputs.value = bjtr.children[i].innerHTML;
console.log(inputs.value);
var tds = bjtr.children[i];
bjtr.children[i] = "";
tds.appendChild(inputs)
var edits = bjtr.querySelector(".edits");
edits.style.display = "none";
var saves = bjtr.querySelector(".saves");
saves.style.display = "block";
}
var inps = document.getElementsByClassName('inp');
for (var i = 0; i < inps.length; i++) {
inps[i].value = bjtr.children[i + 1].children[0].value;
inps[3].setAttribute("disabled", "true")
}
obj = false;
}
// 保存
function save(e) {
var bjtr = e.parentNode.parentNode;
var input = bjtr.querySelectorAll("input");
for (var i = 1; i <= input.length; i++) {
bjtr.children[i].innerHTML = input[i - 1].value;
input[i - 1].remove();
}
for (var i = 0; i < arr.length; i++) {
if (arr[i].id == input[3].value) {
arr[i].name = input[0].value;
arr[i].age = input[1].value;
arr[i].sex = input[2].value;
arr[i].id = input[3].value;
}
}
console.log(arr);
var edits = bjtr.querySelector(".edits");
edits.style.display = "none";
var saves = bjtr.querySelector(".saves");
saves.style.display = "none";
edits.style.display = "block";
delNull();
}
// 清空
function delNull() {
var inps = document.getElementsByClassName('inp');
for (var i = 0; i < inps.length; i++) {
inps[i].value = "";
inps[i].removeAttribute("disabled");
}
}
//搜索
var input2 = document.getElementById('input2');
var btn2 = document.getElementById('btn2');
btn2.onclick = function () {
var k = []
var val = input2.value; //獲取搜索框的值
for (let i = 0; i < arr.length; i++) { //根據關鍵字查找
if (arr[i].name.search(val) != -1 || arr[i].age.search(val) != -1 || arr[i].sex.search(val) != -1 || arr[i].stuid.search(
val) != -1) {
var dx = {
name: arr[i].name,
age: arr[i].age,
sex: arr[i].sex,
stuid: arr[i].stuid
}
k.push(dx)
}
}
console.log(k);
var s =
'<tr><th>序號</th><th>姓名</th><th>年齡</th><th>性別</th><th>學號</th><th colspan="2">操作</th></tr>'
for (let i = 0; i < k.length; i++) {
s += '<tr><td>' + (i + 1) + '</td><td>' + k[i].name + '</td><td>' + k[i].age + '</td><td>' + k[i].sex +
'</td><td>' + k[i].stuid + '</td><td><button type="button"' + i +
'" οnclick="dels(this)">洗掉</button></td><td><button type="button"' + i +
'" οnclick="edits(this)">編輯</button></td></tr>'
}
table.innerHTML = s
input2.value = ''
}
</script>
</body>
</html>
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/303320.html
標籤：其他
上一篇：JavaScript學習一