标题:使用 HTML 和 JavaScript 实现简单的待办事项列表

目录

[一、HTML 结构设计](#一、HTML 结构设计)

[二、JavaScript 逻辑处理](#二、JavaScript 逻辑处理)


一、HTML 结构设计

  • 整体布局
    • 在 HTML 部分,整体布局通过一个类名为containerdiv元素来实现,该元素在页面中水平居中(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),并将输入框的值作为事项添加到行中。
    • 添加完成后,清空输入框的值。
javascript 复制代码
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;),如果已经标记,则取消删除线和恢复字体颜色。
javascript 复制代码
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),确认后删除该行,否则提示不要半途而废。
javascript 复制代码
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),如果事项已经标记,则提示事情已经完成。
javascript 复制代码
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 之间的紧密配合,涉及到了元素的创建、添加、删除、样式修改以及事件处理等多个方面的知识。

相关推荐
Cyan_RA913 小时前
计算机网络面试题 — TCP连接如何确保可靠性?
前端·后端·面试
谢尔登13 小时前
【CSS】层叠上下文和z-index
前端·css
鹏多多13 小时前
前端复制功能的高效解决方案:copy-to-clipboard详解
前端·javascript
AryaNimbus13 小时前
你不知道的 Cursor系列(三):再也不用死记硬背 Linux 命令,终端 Cmd+K 来帮你!
前端·ai编程·cursor
uhakadotcom13 小时前
Rollup 从0到1:TypeScript打包完全指南
前端·javascript·面试
Mintopia13 小时前
实时语音转写 + AIGC:Web 端智能交互的技术链路
前端·javascript·aigc
2503_9284115613 小时前
9.15 ES6-变量-常量-块级作用域-解构赋值-箭头函数
前端·javascript·es6
Pedantic13 小时前
SwiftUI ShareLink – 显示分享表单的使用
前端
徐小夕14 小时前
花了一天时间,开源了一套精美且支持复杂操作的表格编辑器tablejs
前端·算法·github
Mintopia14 小时前
Next.js 单元测试究竟该选 JTest 还是 Vitest?
前端·javascript·next.js