Question

单击该行时，表格会显示详细信息。问题是我有数量（减号/加号）链接输入/减少输入值。当我点击链接时，我的表显示详细信息，我不想这样做。我只想在点击行而不是链接时显示详细信息。

这是我的HTML：

<div class="table-responsive">
    <div id="detailedTable_wrapper" class="dataTables_wrapper form-inline no-footer">
        <table class="table table-hover table-condensed table-detailed dataTable no-footer" id="detailedTable" role="grid">
            <thead>
                <tr role="row">
                    <th class="sorting_disabled" rowspan="1" colspan="1"><?=_("Produits")?></th>
                    <th style="width:120px;" class="sorting_disabled" rowspan="1" colspan="1"></th>
                </tr>
            </thead>
            <tbody>
                <tr role="row">
                    <td class="v-align-middle semi-bold">Test</td>
                    <td class="v-align-middle text-right">
                        <div class="input-group">
                            <span class="input-group-addon primary">
                                <a href="#" class="quantityMinus"><i class="fa fa-minus-circle"></i></a>
                            </span>
                            <input type="text" class="form-control text-center quantity" data-v-min="0" data-v-max="999" placeholder="0" autocomplete="false" style="width:50px;">
                            <span class="input-group-addon primary">
                                <a href="#" class="quantityPlus"><i class="fa fa-plus-circle"></i></a>
                            </span>
                        </div>
                    </td>
                </tr>
            </tbody>
        </table>
    </div>
</div>

这是我的JS：

$('#detailedTable tbody').on('click', 'tr', function () {
    //var row = $(this).parent()
    if ($(this).hasClass('shown') && $(this).next().hasClass('row-details')) {
        $(this).removeClass('shown');
        $(this).next().remove();
        return;
    }
    var tr = $(this).closest('tr');
    var row = table.DataTable().row(tr);

    $(this).parents('tbody').find('.shown').removeClass('shown');
    $(this).parents('tbody').find('.row-details').remove();

    row.child(_format(row.data())).show();
    tr.addClass('shown');
    tr.next().addClass('row-details');
});

Answer 1

要排除这些链接，您需要拦截它所在的click event对象，然后使用它的target属性来查找{{1最好定义您正在寻找比较和attributes行为的值（如果它有任何重定向等）。

preventDefault

示例：https://jsfiddle.net/DinoMyte/22zLa0qz/1/

排除点击事件中的类元素

1 个答案: