将按钮放在数据表行中

Question

我在数据table列中放置了按钮，数据table是多选类型。但是当我点击一个按钮时，它会突出显示该行而不是触发模态。

我有一个简单的table：

<table id="example" class="display dataTable no-footer" cellspacing="0" width="100%" role="grid" aria-describedby="example_info" style="width: 100%;">
<thead>
    <tr role="row"><th class="sorting_asc" tabindex="0" aria-controls="example" rowspan="1" colspan="1" aria-sort="ascending" aria-label="Name: activate to sort column descending" style="width: 211px;"><b>Name</b></th><th class="sorting" tabindex="0" aria-controls="example" rowspan="1" colspan="1" aria-label="Cost: activate to sort column ascending" style="width: 41px;"><b>Cost</b></th><th class="sorting" tabindex="0" aria-controls="example" rowspan="1" colspan="1" aria-label="Audience: activate to sort column ascending" style="width: 156px;"><b>Audience</b></th><th class="sorting" tabindex="0" aria-controls="example" rowspan="1" colspan="1" aria-label="Date: activate to sort column ascending" style="width: 217px;"><b>Date</b></th><th class="sorting" tabindex="0" aria-controls="example" rowspan="1" colspan="1" aria-label="Venue: activate to sort column ascending" style="width: 401px;"><b>Venue</b></th><th class="sorting" tabindex="0" aria-controls="example" rowspan="1" colspan="1" aria-label=": activate to sort column ascending" style="width: 55px;"></th></tr>
</thead>
<tbody>     
    <tr role="row" class="odd">
        <td class="sorting_1">Literacy subject leader meeting</td>
        <td>Free</td>
        <td>Literacy Subject Leader</td>
        <td>2015-06-25 13:00:00 - 15:30:00</td>
        <td>Event Location</td>
        <td><button type="button" class="btn btn-primary btn-sm" data-toggle="modal" data-target="#fullDetails">Details</button>
        </td></tr>
</tbody>

我的 JS 是：

$(document).ready(function() {
            var table = $('#example').DataTable( {

                 dom: 'T<"clear">lfrtip',
                tableTools: {
        "sRowSelect": "multi",
        "aButtons": [ "select_all", "select_none" ]
    }
            });

            $('#example tbody').on( 'click', 'tr', function () {
                $(this).toggleClass('selected');
            } );

            $('#button').click( function () {
                alert( table.rows('.selected').data().length +' row(s) selected' );
            } );
        } );

我不确定如何从 JS 定义的点击事件中排除按钮

Answer 1

您使用jQuery停止传播命令停止按钮点击'bubbling'到一行点击：

$( "#button" ).click(function( event ) {
    event.stopPropagation();
    alert( table.rows('.selected').data().length +' row(s) selected' );
});

Answer 2

在您的 tr 单击事件处理程序中，您可以检查 e.target 是否实际上是一个模态按钮 :

$('#example tbody').on( 'click', 'tr', function (e) {
    if(!$(e.target).is('[data-toggle="modal"]')){
        $(this).toggleClass('selected');
    }
});

JSFiddle

您也可以使用 jQuery 打开模式。删除 data-toggle="modal" 属性并将 modal-btn（或任何）class 添加到按钮。

$('#example tbody').on( 'click', 'tr', function (e) {
    if($(e.target).is('.modal-btn')){
        $('#fullDetails').modal('show');
    }else{
        $(this).toggleClass('selected'); 
    }
});

JSFiddle

将按钮放在数据表行中

Placing buttons in a datables row

html

javascript

jquery

jquery-datatables