How to reference one <td> from another <td> within the same <tr> in JQuery?
<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>