jQuery Click Cell to Change into Text Box -
i have been looking on google , stackoverflow haven't been able find i'm after of yet. if point me in right direction great.
what have table 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 looking able edit <td>(notes text)</td> value in table cell clicking on changes input box (displaying in cell) can edited , saved again clicking off it.
i have (very) basic knowledge in jquery fine updating side of things using php / mysql.
any great.
thanks
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 above works, i'd heartily recommend applying class td element you'd able edit (assuming want able edit more 1 cell).
failing that: use 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 question op (in comments):
one tiny (i hope) other question was, there way move being
textarea,input?
yep; that's pretty accomplished:
$('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 change $('<textarea />') $('<input type="text" />') although type attribute may not strictly required (since input elements default type="text" anyway). find('input:text').
references:
Comments
Post a Comment