jQuery单击单元格以更改为文本框

Question

我一直在寻找谷歌和StackOverflow,但还没有找到我现在所追求的东西.如果有人能指出我正确的方向,这将是伟大的.

我有一个有5行的表

<tr>
    <th scope="row" class="table-check-cell"><input type="checkbox" name="selected[]" id="table-selected-1" value="1"></th>
    <td>123456</td>
    <td>Address 1</td>
    <td>10th Feb 2011 (10:43am)</td>
    <td><ul class="keywords">
        <li class="pink-keyword">Awaiting Reply</li>
        <li class="purple-keyword">Direct</li>
        </ul>
    </td>
    <td>(Notes Text)</td>
    <td>1</td>
    <td class="table-actions">
        <a href="#" title="View" class="with-tip"><img src="images/magnifier.png" width="16" height="16"></a>
        <a href="#" title="Edit" class="with-tip"><img src="images/pencil.png" width="16" height="16"></a>
        <a href="#" title="Validate" class="with-tip"><img src="images/navigation.png" width="16" height="16"></a>
        <a href="#" title="Close" class="with-tip"><img src="images/cross-circle.png" width="16" height="16"></a>
    </td>
</tr>

我要做的是能够<td>(Notes Text)</td>通过单击它来编辑表格单元格中的值,使其更改为输入框(当前显示单元格中的内容),以便可以通过单击将其编辑并再次保存.

我在jQuery中有(非常)基础知识,但使用PHP/MySQL的更新方面很好.

任何帮助都会很棒.

谢谢

Answer 1

一种可能的方式:

$('td:contains("(Notes Text)")').click(

  function() {
    var text = $(this).text();
    $(this).text('');
    $('<textarea />').appendTo($(this)).val(text).select().blur(

      function() {
        var newText = $(this).val();
        $(this).parent().text(newText).find('textarea').remove();
      });
  });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js"></script>
<table>
  <tbody>
    <tr>
      <th scope="row" class="table-check-cell">
        <input type="checkbox" name="selected[]" id="table-selected-1" value="1" />
      </th>
      <td>123456</td>
      <td>Address 1</td>
      <td>10th Feb 2011 (10:43am)</td>
      <td>
        <ul class="keywords">
          <li class="pink-keyword">Awaiting Reply</li>
          <li class="purple-keyword">Direct</li>
        </ul>
      </td>
      <td>(Notes Text)</td>
      <td>1</td>
      <td class="table-actions">
        <a href="#" title="View" class="with-tip">
          <img src="image/magnifier.png" width="16" height="16" />
        </a>
        <a href="#" title="Edit" class="with-tip">
          <img src="images/pencil.png" width="16" height="16" />
        </a>
        <a href="#" title="Validate" class="with-tip">
          <img src="images/navigation.png" width="16" height="16" />
        </a>
        <a href="#" title="Close" class="with-tip">
          <img src="images/cross-circle.png" width="16" height="16" />
        </a>

      </td>
    </tr>
  </tbody>
</table>

虽然上面的工作,我衷心建议将一个类应用于td您希望能够编辑的元素(假设您希望能够编辑多个单元格).

如果失败了:你可以contentEditable在html中使用该属性:

<table>
  <tbody>
    <tr>
      <th scope="row" class="table-check-cell">
        <input type="checkbox" name="selected[]" id="table-selected-1" value="1" />
      </th>
      <td>123456</td>
      <td>Address 1</td>
      <td>10th Feb 2011 (10:43am)</td>
      <td>
        <ul class="keywords">
          <li class="pink-keyword">Awaiting Reply</li>
          <li class="purple-keyword">Direct</li>
        </ul>
      </td>
      <td contentEditable>(Notes Text)</td>
      <td>1</td>
      <td class="table-actions">
        <a href="#" title="View" class="with-tip">
          <img src="image/magnifier.png" width="16" height="16" />
        </a>
        <a href="#" title="Edit" class="with-tip">
          <img src="images/pencil.png" width="16" height="16" />
        </a>
        <a href="#" title="Validate" class="with-tip">
          <img src="images/navigation.png" width="16" height="16" />
        </a>
        <a href="#" title="Close" class="with-tip">
          <img src="images/cross-circle.png" width="16" height="16" />
        </a>
      </td>
    </tr>
  </tbody>
</table>

编辑回复OP的问题(评论中):

一个微小的(我希望)其他问题是,有没有办法将它从一个textarea转移到input？

是的; 这很容易实现:

$('td:contains("(Notes Text)")').click(
  function() {
    var text = $(this).text();
    $(this).text('');
    $('<input type="text" />').appendTo($(this)).val(text).select().blur(
      function() {
        var newText = $(this).val();
        $(this).parent().text(newText), find('input:text').remove();
      });
  });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js"></script>
<table>
  <tbody>
    <tr>
      <th scope="row" class="table-check-cell">
        <input type="checkbox" name="selected[]" id="table-selected-1" value="1" />
      </th>
      <td>123456</td>
      <td>Address 1</td>
      <td>10th Feb 2011 (10:43am)</td>
      <td>
        <ul class="keywords">
          <li class="pink-keyword">Awaiting Reply</li>
          <li class="purple-keyword">Direct</li>
        </ul>
      </td>
      <td>(Notes Text)</td>
      <td>1</td>
      <td class="table-actions">
        <a href="#" title="View" class="with-tip">
          <img src="image/magnifier.png" width="16" height="16" />
        </a>
        <a href="#" title="Edit" class="with-tip">
          <img src="images/pencil.png" width="16" height="16" />
        </a>
        <a href="#" title="Validate" class="with-tip">
          <img src="images/navigation.png" width="16" height="16" />
        </a>
        <a href="#" title="Close" class="with-tip">
          <img src="images/cross-circle.png" width="16" height="16" />
        </a>
      </td>
    </tr>
  </tbody>
</table>

请注意从更改$('<textarea />')到$('<input type="text" />')尽管type可能不严格要求属性(因为input元素默认为type="text"无论如何).还有find('input:text').

参考文献:

• appendTo().
• blur().
• click().
• find().
• parent().
• remove().
• select().
• text().
• val().