JQuery On Click Select Child Image

Question

I have a datatables table that is also using the row details api. This works just fine when I click on the + and - images.

However I want the details to show when the whole row is clicked, not just the + and - images.

Here is that section of the code:

$('#table tbody td img').on('click', function () {
    var nTr = this.parentNode.parentNode;
    if ( this.src.match('details_close') )
    {
        /* 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' );
    }
});

I have tried removing the img from the first line of the code and doing this.next('img').src along with a few other variations, but all come back with errors saying that the match function won't work with them. How can I change the code so I can click on the whole row instead of just the image?

Answer 1

The following changes should work:

$('#table tbody tr').on('click', function () {
   var nTr = this,
       img=$(this).find('td img')[0];
   if (img.src.match('details_close') )
    {
       /* This row is already open - close it */
       img.src = "../images/details_open.png";
       oTable.fnClose( nTr );
    }
   else
    {
       /* Open this row */
       img.src = "../images/details_close.png";
       oTable.fnOpen( nTr, fnFormatDetails(oTable, nTr), 'details' );
    }
} );

The most likely reason you had issues with the .match() call is because you replaced the direct Node access with a jQuery object, and that does not have a match method.