Using context and "this" in jQuery
<p>I'm working on a project that requires me to make cells in a table editable when the equivalent row in another table has been clicked.  The problem I am having is that I can't get it to only make a single row in the updateable table editable, instead it is making every cell of every row editable.</p>

<p>Here is a sample on jsfiddle demonstrating the issue: <a href="http://jsfiddle.net/z9qtH/24/" rel="nofollow">http://jsfiddle.net/z9qtH/24/</a></p>

<p>In this sample if you click "Row 1" in the table at the top, the first row of the table below should have the contents of its cells replaced with inputs. Instead, both rows in the bottom table are becoming editable.</p>

<p><strong>Code</strong></p>

<p>HTML:</p>

<pre><code>&lt;table border="1"&gt;
&lt;tr&gt;
    &lt;td class="editable"&gt;Row 1&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
    &lt;td&gt;Row 2&lt;/td&gt;
&lt;/tr&gt;
&lt;/table&gt;

&lt;table class="updateable" border="1"&gt;
    &lt;tr&gt;
        &lt;td&gt;1 - 1&lt;/td&gt;
        &lt;td&gt;1 - 2&lt;/td&gt;
        &lt;td&gt;1 - 3&lt;/td&gt;
    &lt;/tr&gt;
    &lt;tr&gt;
        &lt;td&gt;2 - 1&lt;/td&gt;
        &lt;td&gt;2 - 2&lt;/td&gt;
        &lt;td&gt;2 - 3&lt;/td&gt;
    &lt;/tr&gt;
&lt;/table&gt;
</code></pre>

<p>Javascript:</p>

<pre><code>function replaceRowCellContentsWithInput(row) {
    $("td", row).each(function() {
        $(this).html('&lt;input type="text" value="' + $(this).html() + '" /&gt;');
    });
}

$(document).ready(function() {
    $("td.editable").click(function() {
        var cell = $(this);
        var rowIndex = cell.parent().index();
        var table = $("table.updateable");

        replaceRowCellContentsWithInput(table.children(rowIndex));
    });
});
</code></pre>
