Question

我正在使用tablesorter创建一个表。该表格在行点击时隐藏了一个Google图表。该表中的某些内容具有指向单独页面的链接。当我单击链接时，它充当行单击，并显示图表，而不是通过链接进行导航。我已经参考了有关此主题的堆栈文章，但是它可能对我而言无法正常工作。

Stop table row toggle upon clicking link

给出并接受的答案是：

$('a').click(function(e){
    e.stopPropagation();
});

我尝试插入脚本：

$('a').click(function(drawGoogleChart){
    drawGoogleChart.stopPropagation();
});

但是它仍然对我不起作用

PHP用于以SQL查询作为数据点动态创建表

echo "<table id='test_table' class='table table-hover tablesorter'>";
    echo "<thead>";
        echo "<tr>";
            echo "<th>TestColA</th><th>TestColC</th><th>TestColC</th>";
        echo "</tr>";
    echo "</thead>";
    echo "<tbody>";
        while($row = mysqli_fetch_array($db_query){
            $valA = $row[0]; #first element is an id for toggle
            echo "<tr onclick='drawGoogleChart(\"$valA\")';>";
                echo "<td>$row[0]</td>";
                echo "<td><a href="www.google.com" target='_blank'>$row[1]</a></td>";
                echo "<td>$row[2]</td>";
           echo "</tr>";

           // Child Row
           echo "<tr class='tablesorter-childRow'>";
           echo "<td><div id=\"$chart_holder\"></div></td>";
           echo "</tr>";
        }
    echo "</tbody>";
echo "</table>";

CSS用于行切换

.tablesorter-childRow {
    display: none;
}
.tablesorter-childRow.show {
    display: table-row !important;
}

JS用于行切换

$(function() {

    var $table = $('.tablesorter');

    $table.tablesorter({
        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();

    // make toggles clickable
    $table.on('click', '.tablesorter-hasChildRow', function() {
        $(this)
            .closest('tr')
            .nextUntil('tr:not(.tablesorter-childRow)')
            .toggleClass('show');
        return false;
    });

});

JS小提琴：http://jsfiddle.net/sdsobvp9/43/

Answer 1

在这种情况下，您需要在单击链接时停止传播事件。

一种方法是添加以下代码：

// Stop propagation click event to the table if an anchor is clicked
$('.tablesorter').on('click', 'a', function(e) {
    e.stopPropagation()
})

将其添加到您的JSFiddle中，它将变成：JSFiddle

PHP单击链接而不是行切换

1 个答案: