title: jQuery get table header name of clicked cell with id
body: <p>I have a table, and in that table I have values with <code>id="edit"</code>. Now, what I want is to get the header name of the corresponding column when I click on any of the cells. What I have so far, based on a previous question asked is:</p>
  
  <pre><code>$('body').on('click', 'td#edit', function() {  
      var th = $('this').closest('th').eq($('th').val());
      alert(th);        // returns [object Object]
      .........................
  }
  </code></pre>
  
  <p>Can you help me out with this?</p>
  
  <p><strong>HTML:</strong></p>
  
  <pre><code>&lt;table id="myTable" class="myTable"&gt;
  &lt;tbody&gt;
      &lt;tr&gt;
          &lt;th&gt;Select&lt;/th&gt;
          &lt;th&gt;JobNo&lt;/th&gt;
          &lt;th&gt;Customer&lt;/th&gt;
          &lt;th&gt;JobDate&lt;/th&gt;
          &lt;th&gt;Warranty&lt;/th&gt;
          &lt;th&gt;RepairStatus&lt;/th&gt;
          &lt;th&gt;POP&lt;/th&gt;
          &lt;th&gt;DOA&lt;/th&gt;
          &lt;th&gt;Model&lt;/th&gt;
          &lt;th&gt;SN&lt;/th&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
          &lt;td class="check"&gt;
              &lt;input type="checkbox" value="12345"&gt;
          &lt;/td&gt;
          &lt;td class="edit"&gt;
              &lt;b&gt;12345&lt;/b&gt;
          &lt;/td&gt;
          &lt;td class="edit"&gt;gdsgasdfasfasdfa&lt;/td&gt;
          &lt;td class="edit"&gt;2011-01-21&lt;/td&gt;
          &lt;td class="edit"&gt;TRUE&lt;/td&gt;
          &lt;td class="edit"&gt;RP&lt;/td&gt;
          &lt;td class="edit"&gt;FALSE&lt;/td&gt;
          &lt;td class="edit"&gt;0&lt;/td&gt;
          &lt;td class="edit"&gt;5152342&lt;/td&gt;
          &lt;td class="edit"&gt;66665464&lt;/td&gt;
      &lt;/tr&gt;
  &lt;/tbody&gt;
  </code></pre>
  
  <p></p>