title: Trying to get the correct 'td:nth-child(1)' value from a table
body: <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>