利用dom操作实现，对一个表格的增删改查
代码如下：
todolist.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="todolist.css">
<script src="todolist.js" defer></script>
</head>
<body>
<div class="container">
<div class = "top">
<input type="text" class="content">
<input type="button" value="添加" class="btn">
</div>
<table border="1">
<thead>
<tr>
<th>内容</th>
<th>操作</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</div>
</body>
</html>todolist.js
// 获取添加按钮
var btn = document.querySelector(".btn")
console.log(btn)
// 获取输入框
var content = document.querySelector(".content")
// 获取tbbody
var tbody = document.querySelector("tbody")
// 定义标识
var flag = 1
//修改存储的是哪条信息
var targetFlag = 0
// 给添加按钮绑事件
btn.onclick = function(){
if(btn.value == "修改") {
var tds = document.querySelectorAll("tbody tr td:nth-child(1)")
for(var i = 0; i < tds.length; i ++ )
{
if(tds[i].getAttribute("index") == targetFlag){
tds[i].innerHTML = content.value
content.value=""
btn.value = "添加"
}
}
return
}
var text = content.value.trim() // trim去掉前后的空格
if(text.length != 0){
var tr = document.createElement("tr")
var td1 = document.createElement("td")
td1.setAttribute("index", flag)
flag ++;
td1.innerText = text
var td2 = document.createElement("td")
td2.innerHTML = '<input type="button" value="完成" class="finish"><input type="button" value="删除" class="delete"><input type="button" value="修改" class="update"></input>'
tr.append(td1)
tr.append(td2)
tbody.append(tr)
content.value = "" //去掉输入框内的值
} else {
alert("请输入信息")
}
// 给完成按钮绑定事件
var finish = document.getElementsByClassName("finish")
for(var i = 0; i < finish.length; i ++ ){
finish[i].onclick = function(){
var target = this.parentNode.previousElementSibling
if(target.style.textDecoration == "line-through") {
target.style.textDecoration = "none"
target.style.color = "#000"
this.value = "完成"
this.style.borderColor = "#910000"
this.style.color = "#910000"
} else {
target.style.textDecoration = "line-through"
target.style.color = "#888"
this.value = "恢复"
this.style.borderColor = "#888"
this.style.color = "#888"
}
}
}
var deleteBtn = document.getElementsByClassName("delete")
for(var i = 0; i < deleteBtn.length; i ++ )
{
deleteBtn[i].onclick = function(){
if(this.parentNode.previousElementSibling.style.textDecoration == "line-through") {
if(confirm("确定要删除吗？")){
var target = this.parentNode.parentNode
tbody.removeChild(target)
}
} else {
alert("努力完成吧")
}
}
}
var update = document.getElementsByClassName("update")
for(var i = 0; i < update.length; i ++ )
{
update[i].onclick = function(){
var target = this.parentNode.previousElementSibling
if(target.style.textDecoration == "line-through"){
alert("已经完成辣，无需修改")
content.value = ""
btn.value = "添加"
} else {
content.value = target.innerText
btn.value = "修改"
targetFlag = target.getAttribute("index")
}
}
}
}
todolist.css
* {
padding: 0;
margin: 0;
}
.container {
width: 25%;
margin: 150px auto;
min-width: 200px;
}
.top {
display: flex;
}
.top .content {
width: 80%;
border: 1px solid #910000;
padding: 5px;
/* 外轮廓去掉 */
outline: none;
border-radius: 5px 0 0 5px;
}
.top .btn {
width: 20%;
border: 1px solid #910000;
background: #910000;
color: #fff;
padding: 5px;
border-radius: 0 5px 5px 0;
cursor: pointer;
}
.top .btn:hover {
box-shadow: 1px 1px 3px #910000;
}
table {
/* 设置表格边框是否合并collapse相邻的单元格共用一个边框 separate */
border-collapse: collapse;
width: 100%;
margin-top: 30px;
text-align: center;
border: 1px solid #fff;
}
table thead tr {
background: #910000;
color: #fff;
}
table thead tr th {
padding: 5px;
font-size: 14px;
}
table tbody tr {
background: #eee;
font-size: 13px;
}
table tbody tr td {
padding: 5px;
}
table tbody tr:nth-child(odd) {
background: #ddd;
}
table tbody tr td input {
background: none;
border: 1px solid #910000;
padding: 2px 5px;
font-size: 13px;
color: #910000;
/* 鼠标样式 */
cursor: pointer;
}
table tbody tr td input:hover {
box-shadow: 1px 1px 3px #910000;
}
