单击单元格上的事件，而不是整个行-与FIDDLE

click event on a cell and not entire row - with FIDDLE

本文关键字：FIDDLE 单元格 事件 单击      更新时间：2023-09-26

我目前在bootstrap table中的row click事件中使用此代码

$('#myTable').bootstrapTable().on('click-row.bs.table', function (e, row, $element) 
    {
       //....my operation
    }

问题是这触发了整个行，我希望能够为单个单元格触发它。

注意我使用的是参数，row and $element

$element是整个行，这样你就无法知道点击了哪个单元格，引导表没有单元格点击事件，所以你需要手动在最后一个单元格上添加点击事件，并自己填充所需的变量

$('#table').bootstrapTable({
    data: data
}).on('click','td:last-child',function(){
    var $t = $(this), $row = $t.parent(), i = $row.index(), row = data[i];
    var $firstTd = $row.children().eq(0);
    if($firstTd.data("haveTable") !== true){
        $firstTd.data("haveTable",true);
        $firstTd.append('<table class="newTable"><tr><td>NEW TABLE</td></tr></table>');
    } else {
        $firstTd.data("haveTable",false);
        $firstTd.children("table").remove();
    }
});
https://jsfiddle.net/e3nk137y/1663/

try 

$('#myTable').bootstrapTable().on('click-row.bs.table td', function (e, row, $element) 
{
   //....my operation
}

根据我的猜测，当您单击该单元格时，您可能只希望执行该特定单元格的触发器，而不是执行整个表的触发器。

这可以通过停止事件从表单元格到表行的传播来实现。

$('#myTable').bootstrapTable().on('click-row.bs.table', function (e, row, $element){
    //stop the propagation for target cell
    if($(event.target).hasClass('myClass')) e.stopPropagation();
    //the code for handler
    ...
    ...
}

有许多方法可以利用stopPropagation来做这件事。这只是其中之一。

因为我不知道你的其他触发器是如何设置的，所以我不能编写与这些假设一起工作的代码。

试试这个:

$('#myTable tr td:last-child').on('click', function() {
    if( $('.newTable', $(this)).length ) {
        $('.newTable', $(this)).remove();
    } else {
        $(this).append( '<table class="newTable"><tr><td>NEW TABLE</td></tr></table>' );
    }
});
相关文章：