编辑表格中的指定单元格 - jsp答案

【问题标题】：Edit a specified cell in a table - jsp编辑表格中的指定单元格 - jsp
【发布时间】：2014-04-08 04:08:26
【问题描述】：

我需要一些关于 javascript/jquery 或 ajax 的帮助。我正在编写一个 Java Web 应用程序，并且对表格有疑问。我需要有可能编辑一个（并且只有一个指定的单元格）。在这种情况下，我有“状态”字段。单击该值时，我希望有一个下拉列表，其中有两种选择：“主动”和“被动”。

我试图弄清楚，但没有成功。这是我的代码：

    <body>
    <table border = "1">
        <tr>
            <td>name</td>
            <td>surname</td>
            <td>status</td>
        </tr>
        <tr>
            <td> Adam</td>
            <td>Smith</td>
            <td id = "status" onclick = "update(this.id)">active</td>
        </tr>
    </table>

    <script type = "text/javascript">
function update(id){
var content = document.getElementById(id).firstChild.nodeValue;
document.getElementById(id).innerHTML = "<input type = 'text' name = 'txtNewInput' id = 'txtNewInput' value = '" + content + "'/>";
  }
    </script>
</body>

在这种情况下，当我单击单元格时，值会变为“null”并且不再可编辑。

【问题讨论】：

为什么不直接让他们<input>s 开始呢？
好吧，我试图简化...问题是我从带有 java 标签的数据库中获取数据：所以我不想在空字段中输入任何内容，而是更新现有值并将其保存到数据库中。
由于我还不能编辑我的帖子，这里是我的 html 表格：

name surname 状态

人是在控制器中指定的，所以在控制器中没有声明查看
看我的回答。您可以将 <c:out>s 放入 HTML 属性中。

标签： javascript jquery ajax html jsp

【解决方案1】：

你想做这样的事情：

<td>
    <input 
      type='text' 
      name='txtNewInput' 
      id='txtNewInput' 
      value='<c:out value="${person.status}" />' 
      onChange='AjaxCallToUpdateDB(this.id, this.value)'
    />
</td>

实际上，当用户进行更改时将更新发送到数据库需要的不仅仅是将其设为input：您需要对 Servlet 进行 Ajax 调用以将值保存在数据库中。

【讨论】：

不是真的...我可以这样：但我希望它在单击指定单元格后是可编辑的，并且只有选定的单元格是可编辑。

name	surname	状态