目录

一、HTML 结构设计

二、JavaScript 逻辑处理

---

一、HTML 结构设计

• 整体布局：
  • 在 HTML 部分，整体布局通过一个类名为container的div元素来实现，该元素在页面中水平居中（margin: 150px auto;）。
  • 其中包含了一个用于添加事项的输入框和按钮（addBox类），以及一个表格（table元素）用于展示待办事项。

<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 之间的紧密配合，涉及到了元素的创建、添加、删除、样式修改以及事件处理等多个方面的知识。