2018-07-25 19:56 阅读 30


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.


    foreach($report_tabs as $report) {

        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
                        //Creating checker health table & filling with data
                        if ( isset($db_query)) {
                            while($row = mysqli_fetch_array($db_query)) {
                                // 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>";
                                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:

// Table Sorter Options
    // Turns all tables with the 'tablesorter' class into tablesorter tables with the given widgets
        // 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

    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;
  • 点赞
  • 写回答
  • 关注问题
  • 收藏
  • 复制链接分享

1条回答 默认 最新

  • 已采纳
    duanhuhong5255 duanhuhong5255 2018-07-28 05:19

    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() {
    点赞 评论 复制链接分享