title: Make TR clickable from an Anchor a inside the TR using jQuery
body: <p>I have a table that looks like this:</p>
  
  <pre><code>&lt;table id=reportTbl&gt;
    &lt;tbody&gt;
      &lt;tr&gt;
        &lt;td&gt;
          &lt;table id=list&gt;
            &lt;tbody&gt;
              &lt;tr&gt;
                &lt;td&gt;
                  &lt;a title="View Report" onclick="viewReport(123);"&gt;&lt;img src="../images/report/icon_pdf.gif" border="0"&gt;&lt;/a&gt;
                &lt;/td&gt;
                &lt;td&gt;Customer Orders&lt;/td&gt;
                &lt;td&gt;USA&lt;/td&gt;
                &lt;td&gt;Jul 20 2012 3:32PM&lt;/td&gt;
              &lt;/tr&gt;
              .....
  
            &lt;/tbody&gt;
          &lt;/table&gt;
        &lt;/td&gt;
      &lt;/tr&gt;
    &lt;/tbody&gt;
  &lt;/table&gt;
  </code></pre>
  
  <p>I want to make the entire table row in the <code>#list</code> table to be clickable. I thought adding </p>
  
  <pre><code>$('#reportTbl #list a').each( function() {
    // I have other code in this section 
    // ....
    // end other section     
  
    $(this).closest('tr').click( function() { $(this).find('a[title="View Report"]').click(); });
  });
  </code></pre>
  
  <p>but when I click on the row I just keeps opening windows for all of the links in the <code>#list</code> table. I've tried a bunch of different types of jQuery calls and they all do the same thing. </p>