使用jQuery将表格行中的特定tds放入编辑中（然后使用ajax更新）

Question

我是jQuery的新手，因此可以在这里使用一些帮助。

这是我的问题：

我有一个输出动态表的PHP脚本。 每行都有一个“编辑”按钮，以及其他一些字段。 其中只有3个需要变成输入框。 编辑按钮应仅将特定行置于“编辑模式”。 我可以通过在每行的末尾添加一个数字来为每行分配一个唯一的类。

我已经能够使用jQuery将所有行更改为编辑模式，但是我需要特定于一行。

示例行将具有诸如name0，price0和desc0之类的类。 下一行将转到类name1，price1和desc1（用于需要更改的字段）。 如何引用这些值并将它们传递给jQuery，以便它仅对那些元素处理事件？

Answer 1

有两种方法可以做到这一点：

1. 按下按钮时动态创建元素； 要么

2. 隐藏和显示已经存在的元素。

太多的DOM操作可能真的很慢（尤其是在某些浏览器上），因此我赞成（2）。 因此，例如：

<table class="editable">
<tbody>
<tr>
  <td>one</td>
  <td>
    <div class="view">two</div>
    <div class="edit"><input type="text"></div>
  </td>
  <td>
    <div class="view">three</div>
    <div class="edit"><input type="text"></div>
  </td>
  <td>
    <input type="button" class="edit" value="Edit">
    <input type="button" class="send" value="Send" disabled>
    <input type="button" class="cancel" value="Cancel" disabled>
  </td>
</tr>
</tbody>
</table>

与：

table.editable div.edit { display: none; }

和

$(function() {
  $(":button.edit").click(function() {
    var row = $(this).closest("tr");
    row.find("input.view").attr("disabled", true");
    row.find("div.view").each(function() {
      // seed input's value
      $(this).next("div.edit").children("input").val($(this).text());
    }).fadeOut(function() { // fade out view
      row.find("div.edit").fadeIn(function() { // fade in edit
        row.find("input.edit").removeAttr("disabled"); // enable edit controls
      });
    });
  });
  $(":button.cancel").click(function() {
    var row = $(this).closest("tr");
    row.find("input.edit").attr("disabled", true");
    row.find("div.edit").fadeOut(function() {
      row.find("div.view").fadeIn(function() {
        row.find("input.view").removeAttr("disabled");
      });
    });
  });
  $(":button.save").click(function() {
    // ...
  });
});