Question

我目前在row click

中使用此代码用于bootstrap table事件

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

问题在于整个行的触发器，我希望能够为单个单元触发它。

注意我正在使用参数row and $element

以下是FIDDLE

Answer 1

$ element是整行，你不知道用这种方式点击了哪个单元格， bootstrap表没有单元格单击事件，因此您需要在最后一个单元格上手动添加单击事件并自己填充所需的变量

$('#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/

Answer 2

尝试

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

Answer 3

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

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

$('#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有很多方法可以用来做这件事。这只是其中之一。

由于我不知道你的其他触发器是如何设置的，所以我不能编写适用于假设的代码。

Answer 4

试试这个：

$('#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>' );
    }
});

单击一个单元格上的事件而不是整行 - 使用FIDDLE

4 个答案: