title: How to reference one <td> from another <td> within the same <tr> in JQuery?
body: <p>I have an HTML table with the following structure:</p>
  
  <pre><code>&lt;tr&gt;
     &lt;td&gt;123&lt;/td&gt;
     &lt;td ondblclick="makeeditable(this);"&gt;this is some text&lt;/td&gt;
     &lt;td&gt;&lt;span ondblclick="makeeditable(this);"&gt;this is some more text&lt;/span&gt;&lt;span&gt;flag&lt;/span&gt;&lt;/td&gt;
  &lt;/tr&gt;
  </code></pre>
  
  <p>I am writing a JQuery snippet to make second <code>&lt;td&gt;</code> and the first <code>&lt;span&gt;</code> in the third <code>&lt;td&gt;</code> user-editable with a double-click (for what it's worth, the table is being generated dynamically):</p>
  
  <pre><code>function makeeditable(cell){
      var OriginalContent = $(cell).text();
      $(cell).html("&lt;input id='editcell' class='input' type='text' value='" + OriginalContent + "' /&gt;");
      $(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");
      });
  }
  </code></pre>
  
  <p>Using the function above, I am successful in making the cells editable. However, now I need to somehow retrieve the row reference number (text inside the first <code>&lt;td&gt;</code>, <em>123</em> in this example) of the cell that was just edited. My question is, how can one reference the first <code>&lt;td&gt;</code> of a row from the context of the second <code>&lt;td&gt;</code> of the same row and from that of a <code>&lt;span&gt;</code> within yet another <code>&lt;td&gt;</code> of the same row?</p>