效果图
在文本框中输入内容点击添加按钮会在下面生成
添加功能
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>
<script src="js/todolist.js" defer></script>
<style>
* {
padding: 0;
margin: 0;
}
.container {
width: 25%;
margin: 100px auto;
min-width: 260px;
}
.container>div {
display: flex;
margin-bottom: 10px;
}
.container>div .content {
width: 85%;
/* 外轮廓去掉 */
outline: none;
padding: 3px 10px;
border: 2px solid rgb(165, 41, 31);
border-radius: 6px 0 0 6px;
}
.container>div .add {
width: 15%;
padding: 3px;
background: rgb(165, 41, 31);
color: #fff;
border: none;
border-radius: 0 6px 6px 0;
cursor: pointer;
}
table {
width: 100%;
text-align: center;
border-collapse: collapse;
border: #fff 2px solid;
}
table thead tr {
background: rgb(165, 41, 31);
color: #fff;
}
table thead tr th {
padding: 4px;
font-size: 14px;
}
table tbody tr {
background: #ddd;
font-size: 13px;
}
table tbody tr:nth-child(even) {
background: #eee;
}
table tbody tr td {
padding: 4px;
}
table tbody tr input {
border: 1px solid rgb(165, 41, 31);
background: none;
color: rgb(165, 41, 31);
font-size: 12px;
padding: 2px 5px;
cursor: pointer;
border-radius: 4px;
}
table tbody tr input:hover {
box-shadow: 2px 2px 2px rgb(165, 41, 31);
}
</style>
</head>
<body>
<div class="container">
<div>
<input type="text" class="content">
<input type="button" value="添加" class="add">
</div>
<table border="1">
<thead>
<tr>
<th>待办事项</th>
<th>操作</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</div>
</body>
</html>js
//增加
var arr=document.querySelector(".add")
var content=document.querySelector(".content")
var tbody=document.querySelector("tbody")
arr.onclick=function()
{
//trim()去掉字符串前后空格 防止全输入空格也会添加
if(content.value.trim())
{
var tr=document.createElement("tr")
var td1=document.createElement("td")
var td2=document.createElement("td")
td1.innerText=content.value
td2.innerHTML='<input type="button" value="删除"><input type="button" value="修改"><input type="button" value="完成">'
tr.appendChild(td1)
tr.appendChild(td2)
//添加元素要用父级元素添加子级元素
tbody.appendChild(tr)
content.value=""//添加之后文本框变为空
}
}完成功能
点击完成之后事项加中划线 颜色变灰
注意这个功能要写在添加里面
删除 修改等功能同理
因为只有实现添加之后才会出现按钮
//增加
var arr=document.querySelector(".add")
var content=document.querySelector(".content")
var tbody=document.querySelector("tbody")
arr.onclick=function()
{
//trim()去掉字符串前后空格 防止全输入空格也会添加
if(content.value.trim())
{
var tr=document.createElement("tr")
var td1=document.createElement("td")
var td2=document.createElement("td")
td1.innerText=content.value
td2.innerHTML='<input type="button" value="删除"><input type="button" value="修改"><input type="button" class="finish" value="完成">'
tr.appendChild(td1)
tr.appendChild(td2)
tbody.appendChild(tr)
content.value=""
}
var finish=document.getElementsByClassName("finish")
//找到完成这个按钮以绑定事件
for(var j=0;j<finish.length;j++)
{
finish[j].onclick=function()
{
var target=this.parentElement.previousElementSibling
//this是一个按钮 父级是td 父级的前一个也是td 就是输入的内容
target.style.color="#999"
target.style.textDocration="line-through"
}
}
}
对完成功能的改善 增加合理性
var finish=document.getElementsByClassName("finish")
for(var j=0;j<finish.length;j++)
{
finish[j].onclick=function()
{
var target=this.parentElement.previousElementSibling
if(target.style.textDocration=="line-through")
{
this.value="完成"
target.style.color="#000"
target.style.textDocration="none"
}
else
{
this.value="撤销"
target.style.color="#999"
target.style.textDocration="line-through"
}
console.log(target.style.textDocration)
}
}
删除功能
//删除
var deletes=document.getElementsByClassName("delete")
for(var k=0;k<deletes.length;k++)
{
deletes[k].onclick=function()
{
//如果是完成的才能删 未完成不能删
if(this.parentElement.previousElementSibling.style.textDocration=="line-through")
{
tbody.removeChild(this.parentElement.parentElement)
}
else
{
alert("继续努力吧")
}
//点击这个按钮的父级是三个按钮被包含的td 再父级是tr
//tr包含三个按钮和待办事项的值 所以要把整个tr删了
//找到tr的父级tbody调用方法就可以删除
}
}修改功能
//查找修改按钮
var update = document.getElementsByClassName("update")
for (var j = 0; j < update.length; j++) {
//回显
update[j].onclick = function() {
var target = this.parentElement.previousElementSibling
//如果该事项已经完成，则不做修改
if (target.style.textDecoration == "line-through") {
alert("事情已经完成，无需修改")
} else {
content.value = target.innerText
add.value = "修改"
flag = 1
num = target.getAttribute("index")
}
}
if (flag == 1) {
var tds = document.querySelectorAll("tbody tr td:nth-child(1)")
for (var j = 0; j < tds.length; j++) {
if (tds[j].getAttribute("index") == num) {
// 相等则进行修改
tds[j].innerText = content.value
content.value = ""
add.value = "添加"
flag = 0
}
}
return
}
全部代码
var add = document.querySelector(".add")
var content = document.querySelector(".content")
var tbody = document.querySelector("tbody")
//标志变量 0添加 1修改
var flag = 0
var index = 0
//记录当前被修改的是哪条信息
var num
add.onclick = function() {
//修改
if (flag == 1) {
var tds = document.querySelectorAll("tbody tr td:nth-child(1)")
for (var j = 0; j < tds.length; j++) {
if (tds[j].getAttribute("index") == num) {
// 相等则进行修改
tds[j].innerText = content.value
content.value = ""
add.value = "添加"
flag = 0
}
}
return
}
// trim()去掉字符串前后的空格
//添加
if (content.value.trim()) {
var tr = document.createElement("tr")
var td1 = document.createElement("td")
//给单元格绑定属性
td1.setAttribute("index", index)
index++
var td2 = document.createElement("td")
td1.innerText = content.value
td2.innerHTML = '<input type="button" value="删除" class="delete"> <input type="button" value="修改" class="update"> <input type="button" value="完成" class="finish">'
tr.appendChild(td1)
tr.appendChild(td2)
tbody.appendChild(tr)
content.value = ""
}
//查找完成按钮
var finish = document.getElementsByClassName("finish")
for (var j = 0; j < finish.length; j++) {
finish[j].onclick = function() {
var target = this.parentElement.previousElementSibling
if (target.style.textDecoration == "line-through") {
target.style.color = "#000"
target.style.textDecoration = "none"
this.value = "完成"
} else {
this.value = "撤销"
target.style.color = "#999"
target.style.textDecoration = "line-through"
}
}
}
//查找删除按钮
var deletes = document.getElementsByClassName("delete")
for (var j = 0; j < deletes.length; j++) {
deletes[j].onclick = function() {
console.log(this.parentElement.previousElementSibling.style.textDecoration)
//如果是完成了，删除，如果没有完成不允许删除
if (this.parentElement.previousElementSibling.style.textDecoration == "line-through") {
//删除一行
tbody.removeChild(this.parentElement.parentElement)
} else {
alert("努力完成吧")
}
}
}
//查找修改按钮
var update = document.getElementsByClassName("update")
for (var j = 0; j < update.length; j++) {
//回显
update[j].onclick = function() {
var target = this.parentElement.previousElementSibling
//如果该事项已经完成，则不做修改
if (target.style.textDecoration == "line-through") {
alert("事情已经完成，无需修改")
} else {
content.value = target.innerText
add.value = "修改"
flag = 1
num = target.getAttribute("index")
}
}
}
}