Merge pull request #50 from Computerization/YHR/TODOLIST1

Add yhr's todolist1
Computerization · Nov 19, 2020 · ca7df48 · ca7df48
2 parents a4e2665 + b0fb9e4
commit ca7df48
Show file tree

Hide file tree

Showing 6 changed files with 169 additions and 0 deletions.
diff --git a/2020/yhr/todolist1/css/main.css b/2020/yhr/todolist1/css/main.css
@@ -0,0 +1,32 @@
+body {
+    background-color:rgb(32,32,32);
+    margin: 0%;
+}
+table {
+    text-align: center;
+    border:1;
+    border-collapse: collapse;
+}
+tr{
+    height:20px;
+}
+a {
+    display: inline-block;
+    margin: 3px 5px;
+}
+input{
+    width:98%;
+    border-radius: 15px;
+    text-indent: 5px;
+}
+._head{
+    width:100%;
+    height:35px;
+    background-color: darkcyan;
+}
+.maindiv{
+    margin:0 auto;
+    width: 1000px;
+    color: white;
+    text-align: center;
+}
diff --git a/2020/yhr/todolist1/index.html b/2020/yhr/todolist1/index.html
@@ -0,0 +1,33 @@
+<!DOCTYPE HTML>
+<html>
+	<head>
+		<title>| Todolist |</title>
+		<meta charset="utf-8" />
+        <link rel="stylesheet" href="css/main.css" />
+        <script src="http://cdn.staticfile.org/jquery/2.1.4/jquery.min.js"></script>
+        <script src="js/table.js"></script>
+        <script src="js/read.js"></script>
+    </head>
+    <body>
+        <div class="_head">
+            <h1>&nbspTodolist</h1>
+        </div>
+        <br>
+        <div class="maindiv">
+            <table id="main">
+                <thead>
+                    <tr>
+                        <td width=20px></td>
+                        <td width=600px><h2>things to do</h2></td>
+                        <td width=250px><h2>deadline</h2></td>
+                        <td width=130px></td>
+                    </tr>
+                </thead>
+                <tbody>
+                </tbody>
+            </table>
+            <br>
+            <button id="btn_addrow" onclick="addRow()">Add more...</button>
+        </div>
+    </body>
+</html>
diff --git a/2020/yhr/todolist1/js/read.js b/2020/yhr/todolist1/js/read.js
@@ -0,0 +1,20 @@
+window.onload=function(){
+    btn_addrow = document.getElementById("btn_addrow");
+    btn_addrow.onclick = function(){
+        addRow();
+    }
+    var _request=new XMLHttpRequest();
+    _request.open("get","../json/data.json");
+    _request.onload=function(){
+        if(_request.status==200){
+            var _json=JSON.parse(_request.responseText);
+            var obj=getElementById("main");
+            for(var i=1;i<=Object.keys(_json.lines);i++)
+            {
+                var line=document.createElement("tr");
+                line.innerHTML="<td>"+i+"</td><td>"+line.things[i]+"</td><td>"+line.times[i]+"</td><td><a>save</a><a>delete</a></td>";
+                line.append(str);
+            }
+        }
+    }
+}
diff --git a/2020/yhr/todolist1/js/table.js b/2020/yhr/todolist1/js/table.js
@@ -0,0 +1,67 @@
+$(function(){
+    registerClick();
+});
+function registerClick(){
+    $("#main tbody tr td a").off("click").on("click", function(){
+        var text = $(this).text();
+        switch(text){
+            case "change":
+                updateRow($(this));
+                break;
+            case "save":
+                saveRow($(this));
+                break;
+            case "delete":
+                deleteRow($(this));
+                break;
+        }
+    });
+}
+function addRow(){
+	var rowindex = $("#main tbody tr").length+1;
+    var str = document.createElement("tr");
+    str.innerHTML="<td>"+rowindex+"</td><td><input type='text'></td><td><input type='text'></td><td><a>save</a><a>delete</a></td>";
+	$("#main tbody").append(str);
+	registerClick();
+	saveAllRow();
+}
+function updateRow(t){
+    $(t).text("save");
+    var tr = $(t).parent().parent();
+    var tds = $(tr).children();
+    for (var i = 0; i < tds.length; i++) {
+        if(i>0 && i<tds.length-1){
+            var td = tds[i];
+            var text = $(td).text();
+            $(td).html("<input type='text' value='"+text+"'>");
+        }
+    }
+}
+function saveRow(t){
+    $(t).text("change");
+    var tr = $(t).parent().parent();
+    var tds = $(tr).children();
+    for (var i = 0; i < tds.length; i++) {
+        if(i>0 && i<tds.length-1){
+            var td = tds[i];
+            var text = $(td).children("input").val();
+            $(td).html(text);
+        }
+    }
+}
+function deleteRow(t){
+    if(confirm("Are you sure you want to delete it?")){
+        var tr = $(t).parent().parent();
+        $(tr).remove();
+        resetSerialNum();
+    }
+}
+function saveAllRow(){
+    var trs = $("#main tbody tr");
+    for (var i = 0; i < trs.length; i++) {
+        if($(trs[i]).children("td:nth-child(4)").children("a:nth-child(1)").text() == "save"){
+            $(trs[i]).children("td:nth-child(4)").children("a:nth-child(1)").click();
+
+        }
+    }
+}
diff --git a/2020/yhr/todolist1/json/data.json b/2020/yhr/todolist1/json/data.json
@@ -0,0 +1,6 @@
+{
+    "lines":[
+        {"thing":"test","time":"2020-10-10"},
+        {"thing":"test2","time":"2020-10-10"},
+    ],
+}
diff --git a/2020/yhr/todolist1/reference source.txt b/2020/yhr/todolist1/reference source.txt
@@ -0,0 +1,11 @@
+I finish this code with the helps from these sources:
+ ·How to use javascript to operate with <table> :
+    https://blog.csdn.net/qq_37902949/article/details/81056551
+    https://blog.csdn.net/summerhmy/article/details/82892271
+ ·The meaning of '$' in javascript:
+    https://blog.csdn.net/qq_42618969/article/details/88569385
+ ·What is jQuery and how to use it:
+    https://m.runoob.com/jquery/jquery-tutorial.html
+ ·How to read and write .json files:
+    https://jingyan.baidu.com/article/22a299b56abc04de18376a54.html
+    https://www.cnblogs.com/liutianzeng/p/10483449.html