JQuery Click a cell to go to the text box

Question

I looked at Google and StackOverflow, but so far I have not been able to find what I need. If someone could point me in the right direction, that would be great.

I have a table with 5 rows

<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> 

What I want to do is edit the <td>(Notes Text)</td> value in the table cell by clicking on it so that it changes to the input field (currently displaying what is in the cell) so that it could be edited and saved by clicking it again.

I have (very) basic knowledge in jQuery, but excellent with the upgrade side of things using PHP / MySQL.

Any help would be great.

thanks

Answer 1

One possible way:

 $('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> 

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

Otherwise, you can simply use the contentEditable attribute in 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> 

---

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

One tiny (I hope) other question: is there a way to move it from textarea to and input ?

Yes; which is quite easily achieved:

 $('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> 

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

Literature:

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

Answer 2

Take a look at some in-place editing plugins. For instance:

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