第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+1
number++;
// 创建一个td，接收number值，赋予序号的含义
var tdNum = document.createElement('td');
tdNum.classList.add('nums');
tdNum.innerHTML = number;
trs.appendChild(tdNum);
// 将输入框的值赋予到新创建的td
for (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>
