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>