javascript - PHP 单击链接而不是行切换

Question

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

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 fiddle :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