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

如果做不到这一点：你可以只使用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()。

Answer 2

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

• jQuery Editable
• Jeditable

Answer 3

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