我下面发布的代码在您单击行内的值时显示了一个子行,在本示例中为colindex of 2
。
我想知道如何使相同的事情发生,但是当您单击行上的任何位置时。我不确定如何执行此操作。我创建表的方式是使用tablesorter和php查询。该表的显示工作正常,我只是在查找文档时遇到问题,即单击某行而不是单击该值时显示子行。
我的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>";
}
?>
我的TableSorter函数根据值打开,单击:
<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>
答案 0 :(得分:1)
您需要做的就是更改delegate
函数(为什么要使用这种旧版本的jQuery?),使其指向行而不是链接。
table.delegate( '.tablesorter-hasChildRow', 'click' ,function() {
我设置了this demo,它使用的是jQuery的较新版本-delegate
函数已被弃用,因此请使用on
:
$table.on('click', '.tablesorter-hasChildRow', function() {