Question

image1我需要使用html，css和javascript制作此核对清单程序（不使用jquery）。附上的例子图片。

Current progress 这就是我到目前为止所拥有的。但是，我还没有想出如何将删除和编辑选项添加到每个列表项中。

<!doctype html>
<html>
<head>
<title>To Do List</title>
<link rel="stylesheet" type="text/css" href="ToDoList.css">
</head>
<body>
<h1> To Do List</h1>
<div id = "listBox">
<input type="text" id="inItemText"><button id = "btnAdd">Add</button>
</div>
<div class="tasks-parent">
      <h4>Tasks:</h4>
<ul id = "todolist">
</ul>
</div>
<script src ="ToDoList.js"></script>
</body>
</html>

#btnAdd {
text-transform: uppercase;
background: #22B473;
border: none;
border-radius: 3px;
font-weight: bold;
color: #FFF;
padding: 3px 10px;
cursor: pointer;
width: auto;
}

.tasks-parent{
border: 2px solid #777;
margin-top: 5px;
width: 17%;
}

html{
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}

ul{
list-style: none;
padding: 0;
margin: 0;
width: 400px;
}

li{
padding: 5px 10px;
color: #000;
}

li span {
padding-left: 17px;
}

function updateItemStatus(){
var cbId = this.id.replace("cb_", "");
var itemText = document.getElementById("item_" + cbId);

if(this.checked){
itemText.style.textDecoration = "line-through";
}
else{
itemText.style.textDecoration = "none";
}

}


function addNewItem(list, itemText) {

var date = new Date();
var id = "" + date.getMinutes(); + date.getSeconds() + 
  date.getMilliseconds() + "";

var listItem = document.createElement("li");
listItem.id = "li_" + id;

var checkBox = document.createElement("input");
checkBox.type = "checkbox";
checkBox.id = "cb_" + id;
checkBox.onclick = updateItemStatus;

var span = document.createElement("span");
span.id = "item_" + id;
span.innerText = itemText;


listItem.appendChild(checkBox);
listItem.appendChild(span);

list.appendChild(listItem);
}

var inItemText = document.getElementById("inItemText");
inItemText.focus();

var btnNew = document.getElementById("btnAdd");
btnNew.onclick = function(){
var inItemText = document.getElementById("inItemText");

var itemText = inItemText.value;
if(!itemText || itemText === "" || itemText === " "){
    return false;
}

addNewItem(document.getElementById("todolist"), itemText);
};

inItemText.onkeyup = function(event) {

if(event.which == 13){
var itemText = inItemText.value;

if(!itemText || itemText === "" || itemText === " "){
    return false;
}

addNewItem(document.getElementById("todolist"), itemText);

inItemText.focus();
inItemText.select();
}

};

Answer 1

这是我的代码。它并不完美，我没有测试它，但我希望它有所帮助。

var todo_items = 0;
window.onload = function(){
	
  var todo = document.getElementById("todo");
  var todo_form = todo.querySelector("#todo-form");
  todo_form.onsubmit = function(e){
    var todo_input = e.target.querySelector("input[name='todo']");
    var todo_name;
    if(todo_input.dataset.edit == "true"){
      var todo_item_id = todo_input.dataset.id;
      todo_name = todo.querySelector(".tasks #item" + todo_item_id + " .todo-name");
      todo_name.textContent = todo_input.value;
      todo_input.dataset.edit = false;
      todo_input.dataset.id = "";
    }else{

      var todo_value = todo_input.value;

      var item = document.createElement("tr");
      item.id = "item"+todo_items;

      var todo_check = document.createElement("td");
      todo_check.setAttribute("class", "check fa fa-square");
      todo_check.dataset.id = todo_items;
      todo_check.dataset.checked = false;
      todo_check.onclick = function(e){
        var todo_item_id = e.target.dataset.id;
        var todo_name = todo.querySelector(".tasks #item" + todo_item_id + " .todo-name");
        if(e.target.dataset.checked == "true"){
          e.target.setAttribute("class", "check fa fa-square");
          todo_name.style.textDecoration = "";
          e.target.dataset.checked = false;
        }else{
          e.target.setAttribute("class", "check fa fa-check-square");
          todo_name.style.textDecoration = "line-through";
          e.target.dataset.checked = true;
        }
      };
      item.appendChild(todo_check);

      todo_name = document.createElement("td");
      todo_name.setAttribute("class","todo-name");
      todo_name.textContent = todo_value;
      item.appendChild(todo_name);

      var edit_delete = document.createElement("td");

      var edit_button = document.createElement("a");
      edit_button.href = "#";
      edit_button.textContent = "Edit";
      edit_button.dataset.id = todo_items;
      edit_button.onclick = function(e){
        var todo_item_id = e.target.dataset.id;
        var todo_name = todo.querySelector(".tasks #item" + todo_item_id + " .todo-name");
        var todo_input = todo.querySelector("#todo-form input[name='todo']");
        todo_input.value = todo_name.textContent;
        todo_input.dataset.edit = true;
        todo_input.dataset.id = todo_item_id;

        return false;
      };
      edit_delete.appendChild(edit_button);

      edit_delete.appendChild(document.createTextNode(" | "));

      var delete_button = document.createElement("a");
      delete_button.href = "#";
      delete_button.textContent = "Delete";
      delete_button.dataset.id = todo_items;
      delete_button.onclick = function(e){
        var todo_item_id = e.target.dataset.id;
        var todo_item = todo.querySelector(".tasks #item" + todo_item_id);
        todo_item.parentNode.removeChild(todo_item);
        return false;
      };
      edit_delete.appendChild(delete_button);

      item.appendChild(edit_delete);

      var tasks = todo.querySelector(".tasks");
      tasks.appendChild(item);

      todo_items++;
    }
    return false;
  };
};

*{
  margin: 0;
  padding: 0;
}
html{
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}
#todo{
  position: absolute;
  left: 50%;
  width: 400px;
  margin-left: -200px;
}
#todo h3{
  padding: 10px 5px;
}
#todo h4{
  padding: 10px 0;
}
.tasks-parent{
  border: solid 2px #777;
  margin: 5px;
  padding: 5px;
}
#todo #todo-form input{
  padding: 3px;
  border: solid 2px #888;
  margin: 0 0 0 5px;
  width: 200px;
}

#todo #todo-form input[type=submit]{
  text-transform: uppercase;
  background: #22B473;
  border: none;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  border-radius: 3px;
  font-weight: bold;
  color: #FFF;
  padding: 3px 10px;
  cursor: pointer;
  width: auto;
}
.tasks{
  width: 100%;
}
.tasks .check{
  color: #29ABE1;
  width: 20px;
  cursor: pointer;
}
.tasks .todo-name{
  width: 250px;
}

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" rel="stylesheet"/>

    <div id="todo">
        <h3>To-Do List</h3>
        <form action="#" id="todo-form">
            <input type="text" placeholder="To-do" name="todo" />
            <input type="submit" value="Add"/>
        </form>
        <div class="tasks-parent">
          <h4>Tasks:</h4>
          <table class="tasks">
          </table>
        </div>
    </div>

Javascript待办事项列表，复选框，删除和编辑/删除项目

1 个答案: