第8次修改的html备忘录
<!DOCTYPE html>
<html>
<head><meta charset="UTF-8"><title>与妖为邻的备忘录</title><style>* {margin: 0;padding: 0;box-sizing: border-box;}body {display: grid;align-items: center;justify-content: center;}.container-left {background: rgb(216, 195, 157);}.container-left textarea {min-height: 30px;outline: none;font-size: 16px;margin-bottom: 5px;border-radius: 5px;padding: 0 5px;border: 1px solid rgb(69, 126, 123);}.container-left button {border-radius: 5px;font-size: 15px;padding: 1px 5px;margin: 1px 5px;cursor: pointer;}.container-right {overflow-y: auto;background: rgb(160, 240, 178);}.container-right table {cursor: default;border: 1px solid #000;}.container-right table {width: 500px;text-align: center;margin: 2px 1px;}.container-right table thead td {color: #fff !important;background: rgb(73, 187, 58);}.container-right table tr td {font-size: 18px;color: #000;border: 1px solid #000;font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;}.container-right table tr td button {cursor: pointer;}.container-right table tr td input {text-align: center;}.delete {color: #fff;background-color: #f00;}.change {background-color: #0f0;}.container-right table tr td span {cursor: pointer;text-align: center;display: inline-block;border-radius: 5px;background-color: antiquewhite;}.container-right table tr td span:hover {color: #fff;background-color: rgb(172, 163, 152);}</style>
</head>
<body><h1 align="center"><dfn>备忘录</dfn>(memorandum)</h1><div class="container"><div class="container-left"><form action="#" method="GET"><textarea rows="1" cols="50%" placeholder="请输入备忘内容"></textarea><button type="button" class="btn">添加</button><button type="reset">重置</button></form></div><div class="container-right"><!--cellpadding 是边框与其内容的间隙大小；cellspacing 是边框与边框之间的间隙大小；--><table cellpadding="0" cellspacing="0"><thead><td>序号</td><td>备忘信息</td><td>移除</td><td>修改</td><td>移动</td></thead><tbody></tbody></table></div></div><script>/*********************一个html提示弹窗无需点击的函数 ******************************/function displayAlert(type, data, time) {var a = document.createElement("a");if (type == "info") {a.style.backgroundColor = "#990000";}a.id = "a";a.style.position = "absolute";a.style.width = "420px";a.style.height = "60px";a.style.marginLeft = "-100px";a.style.marginTop = "-30px";a.style.left = "30%";a.style.top = "15%";a.style.color = "white";a.style.fontSize = "25px";a.style.borderRadius = "20px";a.style.textAlign = "center";a.style.lineHeight = "60px";if (document.getElementById("a") == null) {document.body.appendChild(a);a.innerHTML = data;setTimeout(function () {document.body.removeChild(a);}, time);}}/********************* //TODO 1.获取元素 ******************************/// 获取存放数据位置的tbody标签var tbody = document.querySelector('tbody');// 获取输入数据区域的textarea的标签var inputs = document.querySelectorAll('.container-left textarea');// 获取触发添加功能的button按钮var btn = document.querySelector('.btn');// 设定序号初始值var number = 0;// 判断记录值var flag = true;// 定义空对象，存放输入数据var message = {};// 定义空数组，存放对象var students = [];/********************************** // TODO 2.添加功能 *********************************************/// 给button按钮添加点击事件btn.addEventListener('click', function () {// 输入框非空判断if (inputs[0].value != '' && inputs[0].value != null) {// 将输入的数据存入数组message = {"number": number,'id': inputs[0].value};// 调用去重函数clearMess();// 启用自动数据重置// reset.click();} else {// 空数据提示// alert("数据输入不完全，请重新输入数据");displayAlert("info", "数据为空，请重新输入数据！", 1500);};});/********************************** //TODO3 去重函数 *********************************************/function clearMess() {if (students.length > 0) {for (var i = 0; i < students.length; i++) {if (students[i].id == message.id) {displayAlert("info", "信息重复，请重新输入！", 1500);// alert("键值重复，请重新输入");return false;};};students.push(message);} else {students.push(message);};// 调用回显函数innerMess();};/********************************** //TODO4 回显函数 *********************************************/function innerMess() {// 生成表格内容区域if (flag) {// 创建新的tr节点var trs = document.createElement('tr');tbody.appendChild(trs);// 每次创建一个tr，number+1number++;// 创建一个td，接收number值，赋予序号的含义var tdNum = document.createElement('td');tdNum.classList.add('nums');tdNum.innerHTML = number;trs.appendChild(tdNum);// 将输入框的值赋予到新创建的tdfor (var i = 0; i < inputs.length; i++) {var tds = document.createElement('td');tds.innerHTML = inputs[i].value;trs.appendChild(tds);};// 创建移除操作按钮 - 删除var deleteBtn = document.createElement('td');deleteBtn.innerHTML = `<button class="delete" onclick='deleteMess(this)'>删除</button>`;trs.appendChild(deleteBtn);// 创建修改操作按钮 - 修改var changeBtn = document.createElement('td');changeBtn.innerHTML = `<button class="change" onclick='changeMess(this)'>修改</button>`;trs.appendChild(changeBtn);// 创建数据移动按钮 - 移动var doingBtn = document.createElement('td');doingBtn.innerHTML = `<span onclick="upMess(this)">↑</span><span onclick="downMess(this)">↓</span>`;trs.appendChild(doingBtn);};};/***************************************** //TODO 删除函数****************************************************************/function deleteMess(element) {// 获取到当前标签的序号var deleteIndex = element.parentNode.parentNode;if (confirm("是否确认操作")) {// 先删除标签deleteIndex.remove();// 再根据序号删除数组中的对应数据for (var i = 0; i < students.length; i++) {if (students[i].id == deleteIndex.children[1].innerHTML) {students.splice(i, 1);}};displayAlert("info", "删除成功！", 1500);// alert('操作成功');var nums = document.querySelectorAll('.nums');// 删除行的同时，控制删除行以外行数序号的删减var index;if (nums.length > 0) {for (var i = 0; i < nums.length; i++) {index = i;var nums = document.querySelectorAll('.nums');nums[index].innerHTML = index + 1;};};console.log(students);number--;};};/***************************** TODO 修改函数****************************************************************/function changeMess(element) {var tds2 = element.parentNode.parentNode.children;for (var i = 1; i < tds2.length - 3; i++) {inputs[i - 1].value = tds2[i].innerHTML;// tds2[i].innerHTML = `<input type="text" value='${tds2[i].innerText}'/>`;};// element.parentNode.innerHTML = `<button class="change" onclick='updateMess(this)'>更新</button>`;};/***************** //TODO 更新函数 ****************function updateMess(element) {var tdsInp = document.querySelectorAll('table input');var firstNumber = parseInt(element.parentNode.parentNode.firstElementChild.innerHTML);var tds3 = element.parentNode.parentNode.children;students.splice(firstNumber - 1, 1);for (var i = 0; i < students.length; i++) {if (students[i].id == tdsInp[1].value) {alert("键值重复，请重新输入");return false;};};var message2 = {"number": firstNumber - 1,"id": tdsInp[0].value};students.push(message2);for (var i = 0; i < tdsInp.length; i++) {tds3[i + 1].innerHTML = tdsInp[i].value;};inputs[3].removeAttribute('disabled');reset.click();element.parentNode.innerHTML = `<button class="change" onclick='changeMess(this)'>修改</button>`;};*//***************************** // TODO 数据位置向上移动函数****************************************************************/function upMess(element) {var trsUp = document.querySelectorAll('tbody tr');if (element.parentNode.parentNode.children[0].innerHTML == 1) {displayAlert("info", "移动失败，数据无法再向上移动！", 1500);} else {for (var i = 1; i <= 1; i++) {var temps = element.parentNode.parentNode.children[i].innerHTML;element.parentNode.parentNode.children[i].innerHTML = element.parentNode.parentNode.previousElementSibling.children[i].innerHTML;element.parentNode.parentNode.previousElementSibling.children[i].innerHTML = temps;};};};/***************************** // TODO 数据位置向下移动函数****************************************************************/function downMess(element) {if (element.parentNode.parentNode.children[0].innerHTML == students.length) {displayAlert("info", "移动失败，数据无法再向下移动！", 1500);} else {for (var i = 1; i <= 1; i++) {var temps2 = element.parentNode.parentNode.children[i].innerHTML;element.parentNode.parentNode.children[i].innerHTML = element.parentNode.parentNode.nextElementSibling.children[i].innerHTML;element.parentNode.parentNode.nextElementSibling.children[i].innerHTML = temps2;};};};</script>
</body>
</html>
