Javascript 如何在动态编辑表的行时获取更新的用户输入值？

我正在尝试使用Javascript和JQuery动态编辑表中的行

预期功能- 表中每行的末尾都有一个编辑链接。当用户按下此链接时，tr元素的文本将替换为相应的html内容以供输入。同时，编辑链接将转换为保存链接。当用户在编辑后按下这个保存链接时，我想在输入中获取更新的值，创建一个表单并发布它

问题- 遍历表行的DOM不会给出新的用户输入值，而是拾取旧的数据

关于如何提取用户输入的新值的任何提示

请检查代码中的保存功能。这是我的.erb文件的一部分

PS：有没有更简洁的方法来实现这个功能

谢谢

<table id = "documents_table">
  <thead>
    <tr>
      <th> document ID </th>
      <th> document Link </th>
      <th> document Status </th>
    </tr>
  </thead>

  <%= @documents.each do |document| %>
  <tbody>
    <tr>
      <td> <%= document[:document_id] %> </td>
      <td> <%= document[:document_link] %> </td>
      <td> <%= document[:document_status] %> </td>
      <td> <%= link_to "Edit", {}, {:class => "editLink"} %> </td>
    </tr>
  </tbody>
  <% end %>

 <script type="text/javascript">

 $(".editLink").click(function(event) {
  event.preventDefault();
  var tableRow = $(this).parent().parent();

  var documentId = tableRow.children("td:nth-child(1)");
  var documentLink = tableRow.children("td:nth-child(2)");
  var documentStatus = tableRow.children("td:nth-child(3)");
  var actionLink = tableRow.children("td:nth-child(4)");

  documentId.html("<input type='text' value='" + documentId.html() + "'/>");
  documentLink.html("<input type='text' value='" + documentLink.html() + "'/>");
  documentStatus.html("<select><option value='On-Hold'> On-Hold </option> <option value='Submitted'> Submitted </option> </select>");
  documentAction.html("<input type='text' value='" + documentAction.html() + "'/>");
  actionLink.html("<a class='saveLink' href='/inspection/save'> Save </a>");

  $('.saveLink').bind("click", Save);
});

function Save(event) {
  event.preventDefault();

  // Problematic code -> picks up previous <tr> data instead of new one

  var updatedTableRow = $(this).parent().parent();
  alert(updatedTableRow.html());
  var documentId = updatedTableRow.children("td:nth-child(1):input");
  var documentLink = updatedTableRow.children("td:nth-child(2):input");
  var documentStatus = updatedTableRow.children("td:nth-child(3)");

  var params = { document_id : documentId.val(),
                document_link : documentLink.html(),
                document_status : documentStatus.html()}
  var path = "/inspection/save"
  postForm(path, params);
};
</script>

我想你需要用event.target来代替它

---

我建议在TR上使用DOM ID。 将选定要编辑的ID存储在.editLink单击处理程序中，以始终知道哪一行处于编辑状态。在“保存”功能中，您可以轻松获得正确的行，如下所示：

var updatedTableRow = $(obj.trIdUnderEdit);

---

您是否尝试过在输入上使用类？我通常是这样做的。var value=$this.closesttr.find'input.myValue'。这只是为了学习吗？如果不是的话，我建议研究AngularJs，这将大大简化这类东西。我已经用Angular做了很多这样的动态表格，和vanilla JS相比简直是轻而易举。@kurt我试过你的建议了。未拾取用户输入的新值。这似乎不起作用。谢谢你的建议。当你做AlertUpdateTableRow.html；你确定它显示的是较旧的数据吗？是的，它显示的是较旧的数据。事实上，我正在将此数据发布到另一个视图中，在该视图中会显示较旧的数据。问题不在于访问正确的行。我仍然可以访问正确的行。实际的问题是，在遍历tr元素时，用户输入的新值不会被拾取，而旧值会显示出来。

var updatedTableRow = $(obj.trIdUnderEdit);