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

Question

我一直在 Google 和 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 元素应用一个类(假设您希望能够编辑多个单元格)。

如果失败:您可以在 html 中使用 contentEditable 属性:

<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的问题(在评论中):

One tiny (I hope) other question was, is there any way to move it from being a textarea to and 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() 。