Table Sorter Open Child Row on row click

Question

The code I have posted below shows a child row when you click on the value inside of a row, in this example with colindex of 2.

I was wondering what way I could make the same thing happen but when you click anywhere on the row. I am not sure on how to do this. The way I am creating my table is by using tablesorter and a php query. The display of the table works fine, I am just having issues finding documentation on displaying the child row when a row is clicked not the value.

My PHP:

<?php
    foreach($report_tabs as $report) {
        $tag=$report["tag"];
        $title=$report["title"];
        $hcols=$report["hdrcols"];
        $cols=$report["datacols"];
        $db_query=$report["dbquery"];

        echo "<div id='my_test_table_tab' class='tab-pane active'>";
            echo "<table id='test_table' class='table table-hover tablesorter'>";
                echo "<thead>";
                    echo "<tr>";
                            // removed the hard coded column headers and took the ones from our query
                            global $hcols;
                            foreach($hcols as $column_header) {
                                echo "<th>$column_header</th>";
                            }
                    echo "</tr>";
                echo "</thead>";
                echo "<tbody>";
                        //Use queried data to create each row of the table
                        $rowcount=0;
                        //Creating checker health table & filling with data
                        if ( isset($db_query)) {
                            while($row = mysqli_fetch_array($db_query)) {
                                $rowcount++;
                                // removed the hard coded column set and made it driven off of the array below
                                echo "<tr>";
                                $colindex = 0;
                                foreach( $cols as $column_name ) {
                                    $val = $row[$column_name];
                                    if ($colindex == 2) {
                                        echo "<td style='text-align: left;  width: 1pt;'><a href='#' class='toggle' onClick='drawChart(\"$val\");'>$val</a></td>";
                                        $tempval = $val;
                                    } else {
                                        echo "<td style='width:100pt; text-align='right'>$val</td>";
                                    }
                                    $colindex++;
                                }
                                echo "</tr>";
                                echo "<tr class='tablesorter-childRow'>";
                                    echo "<td colspan='3'>";
                                        echo "<div id='$tempval' style='height: 400px;'></div>";
                                        echo "<div id='fail$tempval' style='height: 400px;'></div>";
                                    echo "</td>";
                                echo "</tr>";
                            }
                        }
                echo "</tbody>";
            echo "</table>";
            echo "<h4>$rowcount rows retrieved</h4>";
        echo "</div>";
    }
?>

My TableSorter function to open based on value click:

<script>
// Table Sorter Options
$(document).ready(function(){
    // Turns all tables with the 'tablesorter' class into tablesorter tables with the given widgets
    $(".tablesorter").tablesorter({
        // stickyHeaders - Keeps headers always visible when scrolling down
        // filter - Adds filter boxes to each column
        cssChildRow : "tablesorter-childRow",
        widgets: ['stickyHeaders','filter'],
        widgetOptions: {
            stickyHeaders_offset : 50,
            filter_placeholder : {search : ''},
            filter_saveFilters: true,
            pager_output: '{startRow} - {endRow} / {filteredRows} ({totalRows})',
            pager_removeRows: false,
            filter_childRows  : true,
            filter_cssFilter  : 'tablesorter-filter',
            filter_startsWith : false,
            filter_ignoreCase : true
        },
    });
    // Clear buttons
    add_clear_buttons();

    var table = $( '#my_test_table_tab' );

    // hide child rows
    table.find( '.tablesorter-childRow td' ).addClass( 'hidden' );

    // Toggle child row content (td), not hiding the row since we are using rowspan
    table.delegate( '.toggle', 'click' ,function() {
    // use "nextUntil" to toggle multiple child rows
    // toggle table cells instead of the row
    $( this )
        .closest( 'tr' )
        .nextUntil( 'tr.tablesorter-hasChildRow' )
        .find( 'td' )
        .toggleClass( 'hidden' );
    return false;
    });

    // Toggle filter_childRows option
    $( 'button.toggle-combined' ).click( function() {
        var widget_options = table[0].config.widgetOptions,
        options = !widget_options.filter_childRows;
        widget_options.filter_childRows = options;
        $( '.state1' ).html( options.toString() );
        // update filter; include false parameter to force a new search
        table.trigger( 'search', false );
        return false;
    });
});
</script>

Answer 1

All you'd need to do is change the delegate function (why are you using such an old version of jQuery?), to point to the row instead of the link.

table.delegate( '.tablesorter-hasChildRow', 'click' ,function() {

I set up this demo, which is using a newer version of jQuery - the delegate function has been deprecated, so use on instead:

$table.on('click', '.tablesorter-hasChildRow', function() {