javascript - How to reference one <td> from another <td> within the same <tr> in JQuery? -
i have html table following structure:
<tr> <td>123</td> <td ondblclick="makeeditable(this);">this text</td> <td><span ondblclick="makeeditable(this);">this more text</span><span>flag</span></td> </tr>
i writing jquery snippet make second <td>
, first <span>
in third <td>
user-editable double-click (for it's worth, table being generated dynamically):
function makeeditable(cell){ var originalcontent = $(cell).text(); $(cell).html("<input id='editcell' class='input' type='text' value='" + originalcontent + "' />"); $(cell).children().first().focus(); $(cell).children().first().keypress(function (e) { if (e.which == 13) { var newcontent = $(this).val(); $(this).parent().text(newcontent); } }); $(cell).children().first().blur(function(){ $(this).parent().text(originalcontent); $(this).parent().removeclass("cellediting"); }); }
using function above, successful in making cells editable. however, need somehow retrieve row reference number (text inside first <td>
, 123 in example) of cell edited. question is, how can 1 reference first <td>
of row context of second <td>
of same row , of <span>
within yet <td>
of same row?
to access first td
in row either td
or span
, use .closest('tr').find('td:first')
.
here's simplified version of code:
$('.editable ').dblclick(function() { var $self= $(this), originalcontent = $(this).text(); $self.closest('tr').find('td:first').text('editing'); $self .html('<input class="input" type="text" value="' + originalcontent + '"/>') .find('input') //the following methods refer new input .focus() .keypress(function(e) { if (e.which === 13) { $self.text($(this).val()); } }) .blur(function() { $self.closest('tr').find('td:first').text('double-click edit'); $self .text(originalcontent) }); });
td { border: 1px solid #ddd; } .editable { background: yellow; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <table> <tr> <td>double-click edit</td> <td class="editable">this text</td> <td><span class="editable">this more text</span><span>flag</span> </td> </tr> </table>
Comments
Post a Comment