jQuery单击单元格以更改为文本框 [英] jQuery Click Cell to Change into Text Box

问题描述

我一直在寻找Google和StackOverflow，但到目前为止还找不到我想要的东西.如果有人可以指出正确的方向，那将是很好的.

I have been looking on Google and StackOverflow but haven't been able to find what I'm after as of yet. If someone could point me in the right direction that would be great.

我有一张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>值来对其进行编辑，以便将其更改为输入框(显示当前单元格中的当前内容)，以便可以对其进行编辑和保存.再次点击关闭它.

What I am looking to do is be able to edit the <td>(Notes Text)</td> value in the table cell by clicking on it so it changes to an input box (displaying currently what is in the cell) so it can be edited and saved again by clicking off it.

我有jQuery的(非常)基础知识，但可以使用PHP/MySQL进行事物更新.

I have a (very) basic knowledge in jQuery but fine with the updating side of things using PHP / MySQL.

任何帮助都会很棒.

谢谢

推荐答案

一种可能的方法:

$('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元素(假设您希望能够编辑多个单元格).

While the above works, I'd heartily recommend applying a class to the td element that you'd like to be able to edit (assuming you want to be able to edit more than one cell).

失败:您可以只使用html中的contentEditable属性:

Failing that: you could just use the contentEditable attribute in the 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的问题(在评论中):

Edited in response to question from OP (in comments):

另一个(我希望)微小的问题是，有什么办法可以将其从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').

Note the change from $('<textarea />') to $('<input type="text" />') although the type attribute may not be strictly required (since input elements default to type="text" anyway). Also the find('input:text').

参考文献:

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

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

这篇关于jQuery单击单元格以更改为文本框的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！