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元素（假设您希望能够编辑多个单元格）。 / p>

失败：您可以使用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提出的问题（在评论中）：

一个小小的（我希望）其他问题是，有没有办法将它从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元素默认为{{ 1}}无论如何）。还有type="text"。

参考文献：

Answer 2

看看一些编辑就地插件。例如：

Answer 3

$(document).ready(function(){
   $("td").bind('click', function(oTd){
      var c = $(oTD).text();
      $(oTd).empty();
      $(oTd).append('<input type="text" value="' + c + '"/>");
   )};
});

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

3 个答案: