目录
一、HTML 结构设计
- 整体布局:
- 在 HTML 部分,整体布局通过一个类名为
container
的div
元素来实现,该元素在页面中水平居中(margin: 150px auto;
)。 - 其中包含了一个用于添加事项的输入框和按钮(
addBox
类),以及一个表格(table
元素)用于展示待办事项。
- 在 HTML 部分,整体布局通过一个类名为
<div class="container">
<div class="addBox">
<input type="text" class="info">
<input type="button" value="add" class="btn">
</div>
<table border="1">
<thead>
<tr>
<th>事项</th>
<th>操作</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</div>
- 表格设计:
- 表格(
table
)的样式设置了表头(thead
)的背景颜色(background: #910000;
)和字体颜色(color: aliceblue;
),使表头突出显示。 - 表格主体(
tbody
)的行(tr
)根据奇数行和偶数行设置了不同的背景颜色(nth - child(odd)
和nth - child(even)
),增强了视觉效果。 - 每行的操作列(
td
)包含了标记(mark
)、修改(update
)和删除(delete
)按钮。
- 表格(
二、JavaScript 逻辑处理
- 添加事项:
- 当页面加载完成(
window.onload
)后,通过document.querySelector
获取添加按钮(btn
)、输入框(info
)和表格主体(tbody
)等元素。 - 点击添加按钮(
btn.onclick
)时,如果输入框的值不为空,则创建一个新的表格行(tr
),并将输入框的值作为事项添加到行中。 - 添加完成后,清空输入框的值。
- 当页面加载完成(
btn.onclick = function () {
if (info.value) {
var tr = document.createElement("tr");
var td_one = document.createElement("td");
var td_two = document.createElement("td");
td_one.innerText = info.value;
td_two.innerHTML = '<input type="button" value="mark" class="mark"><input type="button" value="update" class="updata"><input type="button" value="delete" class="delete">';
tr.appendChild(td_one);
tr.appendChild(td_two);
tr.setAttribute("index", rowIndex);
rowIndex++;
tbody.appendChild(tr);
info.value = "";
}
};
- 标记和取消标记事项:
- 通过
document.querySelectorAll
获取所有的标记按钮(marks
),并为每个按钮添加点击事件(onclick
)。 - 点击标记按钮时,如果事项没有标记,则添加删除线(
text - decoration: line - through;
)和改变字体颜色(color: #888;
),如果已经标记,则取消删除线和恢复字体颜色。
- 通过
var marks = document.querySelectorAll(".mark");
for (var i = 0; i < marks.length; i++) {
marks[i].onclick = function () {
var target = this.parentElement.previousElementSibling;
if (target.style.textDecoration == "") {
target.style.textDecoration = "line - through";
target.style.color = "#888";
} else {
target.style.textDecoration = "";
target.style.color = "#000";
}
};
}
- 删除事项:
- 获取所有的删除按钮(
deletes
),并为每个按钮添加点击事件。 - 点击删除按钮时,如果事项已经标记(
text - decoration: line - through;
),则弹出确认框(confirm
),确认后删除该行,否则提示不要半途而废。
- 获取所有的删除按钮(
var deletes = document.querySelectorAll(".delete");
for (var j = 0; j < deletes.length; j++) {
deletes[j].onclick = function () {
var target = this.parentElement.parentElement;
if (this.parentElement.previousElementSibling.style.textDecoration == "line - through") {
if (confirm("确定删除吗")) {
target.parentElement.removeChild(target);
} else {
alert("感谢手下留情");
}
} else {
alert("不要半途而废");
}
};
}
- 修改事项:
- 获取所有的修改按钮(
updates
),并为每个按钮添加点击事件。 - 点击修改按钮时,如果事项没有标记,则将事项的值显示在输入框中,同时改变添加按钮的文本为
update
,并记录当前要修改的行的索引(updataIndex
),如果事项已经标记,则提示事情已经完成。
- 获取所有的修改按钮(
var updates = document.querySelectorAll(".updata");
for (var i = 0; i < updates.length; i++) {
updates[i].onclick = function () {
var target = this.parentElement.previousElementSibling;
if (target.style.textDecoration == "") {
info.value = target.innerText;
btn.value = "update";
updataIndex = this.parentElement.parentElement.getAttribute("index");
} else {
alert("事情完成了");
}
};
}
- 保存修改:
- 再次点击添加按钮(此时按钮文本为
update
)时,如果updataIndex
有值,则表示是在进行修改操作。 - 根据
updataIndex
找到对应的行,将输入框的值更新到该行的事项中,并清空输入框,同时恢复添加按钮的文本为add
,并清除updataIndex
的值。
- 再次点击添加按钮(此时按钮文本为
这个待办事项列表的实现展示了 HTML 和 JavaScript 之间的紧密配合,涉及到了元素的创建、添加、删除、样式修改以及事件处理等多个方面的知识。