javascript - 将按钮放置在数据行中

Question

我已将按钮放置在数据表列中，数据表是多重选择类型。但是当我单击按钮时，它会突出显示该行而不是触发模式。

我有一个简单的表格:

<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

在您的 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(或任何)类。

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

JSFiddle