Question

我对jQuery有些新意，所以我可以在这里使用一些帮助。

这是我的问题：

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

我已经能够使用jQuery将所有行更改为编辑模式，但我需要将其专门用于行。

示例行将包含name0，price0和desc0等类。下一行将继续使用类name1，price1和desc1（对于需要更改的字段）。我如何引用这些值并将它们传递给jQuery，以便它只处理那些元素上的事件？

Answer 1

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

按下按钮时动态创建元素;或
隐藏和显示已存在的元素。

过多的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() {
    // ...
  });
});

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

1 个答案: