Question

我制作了一个具有添加和删除待办事项功能的待办事项列表。我正在尝试实施待办事项修改。当用户单击“编辑并保存”链接时，我使用了Jquery来编辑字段。我使用EJS作为模板。问题是我不知道如何在我的快速代码中实现put方法？我不知道在这种情况下使用Jquery是否是正确的方法？

这是我的代码谢谢大家

todo-list-ejs：

<script>
    function edit_row(id) {
        document.getElementById("edit_button" + id).style.display = "none";
        document.getElementById("save_button" + id).style.display = "block";

        //Retrieve data first input field
        //editTodo contain old data.
        var editTodo = document.getElementById("newtodo" + id);
        //Retrieve data into input field.
        //Old data inside other variable who can change below.
        var editTodo_data = editTodo.innerHTML;

        //Replace input field by input with new data.
        editTodo.innerHTML = "<input type='text' id='edit_text'" + id + "'value= '" + editTodo_data ">";
    }

    function save_row(id) {
        var todo_val = document.getElementById("edit_text" + id).value;

        document.getElementById("newtodo" + id).innerHTML = todo_val;
        document.getElementById("edit_button" + id).style.display = "block";
        document.getElementById("save_button" + id).style.display = "none";
    }

</script>

<h2>Basic Todolist</h2>

<ul>
    <% todolist.forEach(function(todo,index){ %>
    <li> <a href="/todo/delete/<%= index%>">✘ </a>

        <a href="/todo/edit/<%= index%>" id="edit_button<%= index%>" class="edit" onclick="return edit_row(<%= index%>)">Edit </a>

        <a href="/todo/edit/<%= index%>" id="save_button<%= index%>" class="save" onclick="return save_row(<%= index%>)">Save </a>

        <%=todo%></li>
    <% });%>

</ul>

<form action="/todo/add/" method="post">

    <p>
        <label for="newtodo">Task : </label>
        <input type="text" name="newtodo" id="newtodo" autofocus />
        <input type="submit" />
    </p>

</form>

TODO-LIST.JS（放置方法）

.put('/todo/edit/:id', function(req,res){
        res.render('todo-list.ejs', {
            todolist: req.session.todolist
        });
    })

NodeJS和Express的待办事项列表

0 个答案: