title: Click event listener on a <tr>
body: <p>I have this event that listens for a click on a img then it switches the img for another, but this img can get real small and I wanted to make the entire tr click able. Any suggestions?</p>
  
  <pre><code>$('#example tbody td img').live('click', function () {
                  var nTr = $(this).parents('tr')[0];
                  if ( oTable.fnIsOpen(nTr) )
                  {
                      /* This row is already open - close it */
                      this.src = "images/details_open.png";
                      oTable.fnClose( nTr );
                  }
                  else
                  {
                      /* Open this row */
                      this.src = "images/details_close.png";
                      oTable.fnOpen( nTr, fnFormatDetails(oTable, nTr), 'details' );
                  }
              } );
  </code></pre>
  
  <p><strong>Update</strong>
  I tried using this but now my img won't change. How would I select the img to use (this) or do I just make a var for it?</p>
  
  <pre><code>$('#example tbody td').on('click', function (e) {
          var myImage = $(this).find("img");
          var nTr = $(this).parents('tr')[0];
          if ( oTable.fnIsOpen(nTr) )
          {
          /* This row is already open - close it */
          myImage.src = "images/details_open.png";
          oTable.fnClose( nTr );
          }
          else
          {
          /* Open this row */
          myImage.src = "images/details_close.png";
          oTable.fnOpen( nTr, fnFormatDetails(oTable, nTr), 'details' );
          }
      } );
  </code></pre>