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 + '"/>"); 
    )}; 
});