Trying to get the correct 'td:nth-child(1)' value from a table
<p>I am learning some JQuery basics and am stumped on this particular situation.  I have a basic table with a delete button at the end of each row and am trying to get my JQuery code to recognize the value of column 1 depending on which row I click the 'Delete' button on.  It keeps giving me the value of the first  row regardless of the row I am actually on. </p>

<p>Here is my code for the table:</p>

<pre><code>     &lt;table id="DemoTable"&gt;
        &lt;thead&gt;&lt;tr&gt;&lt;th&gt;Product&lt;/th&gt;&lt;th&gt;Price&lt;/th&gt;&lt;/tr&gt;&lt;/thead&gt;
        &lt;tr&gt;&lt;td&gt;Sirloin Steak 10 oz.&lt;/td&gt;&lt;td&gt;8.77&lt;/td&gt;&lt;td&gt;&lt;input type="submit" value="Delete" /&gt;&lt;/td&gt;&lt;/tr&gt;
        &lt;tr&gt;&lt;td&gt;Filet Mignon 8 oz.&lt;/td&gt;&lt;td&gt;14.50&lt;/td&gt;&lt;td&gt;&lt;input type="submit" value="Delete" /&gt;&lt;/td&gt;&lt;/tr&gt;
        &lt;tr&gt;&lt;td&gt;Redi-Grill 5 oz.&lt;/td&gt;&lt;td&gt;1.55&lt;/td&gt;&lt;td&gt;&lt;input type="submit" value="Delete" /&gt;&lt;/td&gt;&lt;/tr&gt;
        &lt;tr&gt;&lt;td&gt;San Marco Stuffed Shells&lt;/td&gt;&lt;td&gt;.35&lt;/td&gt;&lt;td&gt;&lt;input type="submit" value="Delete" /&gt;&lt;/td&gt;&lt;/tr&gt;
        &lt;tr&gt;&lt;td&gt;Sliced Cheese Yellow&lt;/td&gt;&lt;td&gt;.10&lt;/td&gt;&lt;td&gt;&lt;input type="submit" value="Delete" /&gt;&lt;/td&gt;&lt;/tr&gt;
    &lt;/table&gt;
</code></pre>

<p>And here is the JQuery section:</p>

<pre><code>&lt;script type="text/javascript"&gt;
  $(document).ready(function () {
    $('form').submit(function () {
        var itemName = $('td:nth-child(1)', this).html();
        return confirm('Are you sure you want to delete ' + itemName + '?');
    });
  });
&lt;/script&gt;
</code></pre>

<p>Thanks for any help!</p>
