Question

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

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

问题 - 遍历表格行的DOM不会提供新的用户输入值，而是会获取旧数据。

有关如何获取用户输入的新值的任何指示？

请检查代码中的Save（）函数。这是我的.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>

Answer 1

我认为您需要将this替换为event.target

var tableRow = $(event.target).parent().parent();

Answer 2

我建议在TR＆＃39;上使用DOM ID。在.editLink单击处理程序中存储选择进行编辑的ID，以便始终知道正在编辑哪一行。在保存功能中，您可以轻松获得正确的行：

var updatedTableRow = $(obj.trIdUnderEdit);

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

2 个答案: