實作簡單的資訊錄入系統：
<!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>
<body>
<style>
tr {
width: 500px;
height: 60px;
}
td,
.input1 {
width: 80px;
height: 60px;
border: 1px solid black;
outline: none;
}
#inputbox {
height: 200px;
width: 250px;
}
.showbox {
width: 500px;
text-align: center;
}
.btn {
background-color: #fff;
border: 1px solid black;
margin-right: 20px;
}
.inp {
outline: none;
}
</style>
<div id="inputbox">
學號：<input type="text"><br>
姓名：<input type="text"><br>
年齡：<input type="text"><br>
愛好：<input type="text"><br>
地址：<input type="text"><br>
<input type="submit" ><input type="reset" >
</div>
<div >
<table id="tb" cellpadding="0" cellspacing="0">
<tr >
<td>學號</td>
<td>姓名</td>
<td>年齡</td>
<td>愛好</td>
<td>癖好</td>
<td>操作</td>
</tr>
</table>
</div>
<script>
//獲取添加按鈕的類名
var btn = document.getElementsByClassName('btn');
//重置按鈕--清空填入資訊
btn[1].onclick = function () {
var info = document.querySelectorAll('.inp');
info.forEach((el) => { el.valuehttps://www.cnblogs.com/LIXI-/archive/2022/07/16/= '' })
}
//創建全選框
//創建第一行最后一個全選td到tfirst中
var tdall = document.createElement('td');
var tfirst = document.querySelector('.tfirst');
tfirst.appendChild(tdall);
tdall.classList.add('tdall');
//在tfirst中加入全選的input框
var inputall = document.createElement('input');
inputall.classList.add('inputall');
tdall.appendChild(inputall);
inputall.type = 'checkbox';
// inputall.checked = 'checked';打開此注釋，為已選中狀態，取消選中時，其他的按鈕都選中，可實作反選
// console.log(inputall.value);
//添加按鈕--把內容添加到表格中
btn[0].onclick = function () {
//點擊添加一行到showbox:
var tb = document.querySelector('#tb tbody');
var tr = document.createElement('tr');
tb.appendChild(tr);
//獲取表單div
var inputbox = document.querySelector('.inputbox');
//點擊獲取所有的input值
var info = document.querySelectorAll('.inp');
//遍歷每個值，創建el個td元素，把td添加到tr中
info.forEach((el) => {
var td = document.createElement('td');
td.innerHTML = el.value;
tr.appendChild(td);
})
//創建最后一個td元素，添加到tr中
var tdlast = document.createElement('td');
tr.appendChild(tdlast);
//創建單個勾選框
//創建一個td，添加到tr中
var tdlast2 = document.createElement('td');
tdlast2.classList.add('tdlast2');
tr.appendChild(tdlast2);
// //添加一個input框在tdlast2中
var inputlast = document.createElement('input');
inputlast.classList.add('inputlast');
tdlast2.appendChild(inputlast);
//在inputlast中設定屬性為checkbox或者radio
inputlast.type = 'checkbox';
// 給全選框系結點擊事件，當點擊全選框時，每個單選框都自動被選中
inputall.onclick = function () {
var inputlastAll = document.querySelectorAll('.inputlast');
inputlastAll.forEach((el) => {
if (inputall.checked != 'checked') {//或條件改為：inputall.value https://www.cnblogs.com/LIXI-/archive/2022/07/16/=='on'
el.checked = 'checked';
} else {
el.checked = '';
console.log(inputall.value);
}
})
}
//創建洗掉按鈕，在網頁中命名為洗掉，把其類名改為delbtn,放入最后一個td中
var delbtn = document.createElement('button');
delbtn.innerHTML = '洗掉';
delbtn.classList.add('delbtn');
tdlast.appendChild(delbtn);
//點擊洗掉按鈕，清空一行
delbtn.onclick = function () {
this.parentNode.parentNode.remove();//button->td->tr
}
//創建設定按鈕，在網頁中命名為修改，把其類名改為setbtn,放入最后一個td中
var setbtn = document.createElement('button');
setbtn.innerHTML = '修改';
setbtn.classList.add('setbtn');
tdlast.appendChild(setbtn);
//點擊修改按鈕，對此行可編輯
let flag = true;
setbtn.onclick = function () {
flag = !flag;
if (flag) {
console.log('open');
this.innerHTML = '修改';
//獲取當前td的值，并且放到td中
let tdchange = this.parentNode.parentNode.children;
Array.from(tdchange).forEach((el, index) => {
if ((index == tdchange.length - 2)||(index == tdchange.length - 1)) { return }
el.innerHTML = el.children[0].value;
})
} else {
console.log('close');
this.innerHTML = '保存';
//把td的innerHTML替換成input
let tdchange = this.parentNode.parentNode.children;
Array.from(tdchange).forEach((el, index) => {
if ((index != tdchange.length - 1) && (index != tdchange.length - 2)) {
var text = el.innerHTML;
el.innerHTML = "";
var input1 = document.createElement("input");
input1.classList.add('input1');
input1.value = text;
el.appendChild(input1);
}
})
}
}
};
</script>
</body>
</html>
頁面效果：
實作功能：
1、增加表單資訊
2、修改表達
3、保存修改
4、資訊重置
5、洗掉錄入資訊
6、全部勾選和部分勾選
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/499543.html
標籤：其他