CODEWITHSUNDEEP
jquery
Matthew
Matthew

Reputation: 198

Make TR clickable from an Anchor a inside the TR using jQuery

I have a table that looks like this:

<table id=reportTbl>
  <tbody>
    <tr>
      <td>
        <table id=list>
          <tbody>
            <tr>
              <td>
                <a title="View Report" onclick="viewReport(123);"><img src="../images/report/icon_pdf.gif" border="0"></a>
              </td>
              <td>Customer Orders</td>
              <td>USA</td>
              <td>Jul 20 2012 3:32PM</td>
            </tr>
            .....

          </tbody>
        </table>
      </td>
    </tr>
  </tbody>
</table>

I want to make the entire table row in the #list table to be clickable. I thought adding 

$('#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(); });
});

but when I click on the row I just keeps opening windows for all of the links in the #list table. I've tried a bunch of different types of jQuery calls and they all do the same thing.

Upvotes: 0

Views: 107

Answers (1)

Joseph Silber
Joseph Silber

Reputation: 220026

$('#list').on('click', 'tr', function(e) {

    if ( e.target.tagName.toLowerCase() !== 'a' ) {

        $('a[title="View Report"]', this).click();
    }
});​

Upvotes: 3

Related Questions