使用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() {
    // ...
  });
});