Javascript Java JSP SpringMVC：使表格单元格可编辑的问题_Javascript_Java_Jsp_Spring Mvc

Javascript Java JSP SpringMVC：使表格单元格可编辑的问题

javascript java jsp spring-mvc

Javascript Java JSP SpringMVC：使表格单元格可编辑的问题,javascript,java,jsp,spring-mvc,Javascript,Java,Jsp,Spring Mvc,目标我有一个数据表（只是文本），在加载jsp页面时检索。我正试图使当前包含文本的单元格变成一个文本框，如果单击它，文本框中就包含该文本。每行末尾都有一个“更新”和“删除”按钮。Update将把行当前拥有的任何文本传递给控制器的Update方法（工作正常）。Delete将把键（该行中我指定为键的任何单元格）传递给控制器的Delete方法（由于问题#2而无法工作）。我对控制器类、spring或JSP和JavaScript前端以外的任何东西都没有任何问题问题（所有这些问题都可以通过一个最新的示例

目标

我有一个数据表（只是文本），在加载jsp页面时检索。我正试图使当前包含文本的单元格变成一个文本框，如果单击它，文本框中就包含该文本。每行末尾都有一个“更新”和“删除”按钮。Update将把行当前拥有的任何文本传递给控制器的Update方法（工作正常）。Delete将把键（该行中我指定为键的任何单元格）传递给控制器的Delete方法（由于问题#2而无法工作）。我对控制器类、spring或JSP和JavaScript前端以外的任何东西都没有任何问题

问题

（所有这些问题都可以通过一个最新的示例项目来解决，该项目允许在HTML表格中使用最少的JavaScript就地编辑、删除和插入表格行。我已经阅读了很多示例，这些示例要么使用100%的JavaScript/jQuery/jTable/等创建表格，要么使用HTML表格，但没有基本的功能（这是我描述的情况。）

我不知道如何将包含文本的单元格转换为包含原始文本的输入文本框。我可以显示包含文本的单元格，也可以显示包含原始文本的文本框的单元格，但不能以交互方式两者都显示。我尝试过不同的JS示例，但都存在无法解决的问题，主要是因为它们是为其他一些稍微相似的目的而写

我不知道如何使两个不同的表单以及它们各自的提交按钮作用于相同的数据。我为每行设置了一个表单，在行的末尾有两个提交按钮，“更新”和“删除”。我一次只能让其中一个按钮工作，因为我不知道如何将一个提交按钮与更新关联，而将另一个按钮“删除”与执行删除操作的表单关联

正如您将在控制器代码中看到的，出于某种原因，我必须控制器中的

model.addAttribute（“row”，myService.retrieveRecords（）.get（0））；

，即使此调用：

model.addAttribute（“records”，myService.retrieveRecords（））；

已经填充了每一行。如果没有那行额外的代码，我不知道如何完成同样的事情

我不知道如何在表的底部有一行空文本框，用于向表中添加新行。我尝试复制行当前的显示方式（作为文本框），只有空值，但Java抱怨

中的路径变量与我创建的新的空白行相同

当前代码

JSP

<body>
<div align="center">
    <table border="1" cellpadding="5">
        <caption><h2>TABLE</h2></caption>
        <tr>
            <th>CELL1</th>
            <th>CELL2</th>
            <th>CELL3</th>
            <th></th>
            <th></th>
        </tr>
        <c:forEach var="row" items="${records}">        
            <tr>
                <form:form class="data-form" method="post" action="updateRow" modelAttribute="row">
                    <td><form:input path="cell1" value="${row.cell1}"/></td>
                    <td><form:input path="cell2" value="${row.cell2}"/></td>
                    <td><form:input path="cell3" value="${row.cell3}"/></td>
                    <td><input type="submit" value="UPDATE"/></td>
                    <td><input type="submit" value="DELETE"/></td>
                </form:form>
            </tr>
        </c:forEach>
    </table>
</div>
</body>

// "C".R.U.D.
@RequestMapping(value = "/addRow", method = RequestMethod.POST)
public String handleCreateRecordRequest(@ModelAttribute("record") TodoListRecord record, Model model) {
    myService.createRecord(record);
    return HOME_PAGE_REDIRECT;
}

// C."R".U.D.
@RequestMapping(value = "/home", method = RequestMethod.GET) // 
public String handleRetrieveRecordsRequest(Model model) throws IOException {
    // This has to be in here or it complains that row is null, even though records populates row...     
    model.addAttribute("row", myService.retrieveRecords().get(0)); 
    model.addAttribute("records", myService.retrieveRecords());
    return HOME_PAGE;
}

// C.R."U".D.
@RequestMapping(value = "/updateRow", method = RequestMethod.POST)
public String handleUpdateRecordRequest(@ModelAttribute("row") TodoListRecord row, Model model) {
    myService.updateRecord(row);
    return HOME_PAGE_REDIRECT;
}

// C.R.U."D".
@RequestMapping(value = "/deleteRow", method = RequestMethod.POST)
public String handleDeleteRecordRequest(@ModelAttribute("key") String key, Model model) {
    myService.deleteRecord(key);
    return HOME_PAGE_REDIRECT;
}