0
當您單擊該行時,該表顯示詳細信息。問題是我有數量(減/加)鏈接在/減少輸入值。當我點擊鏈接時,我的表格顯示細節,我不想。我只想在點擊行而不是鏈接時顯示詳細信息。單擊事件時排除類元素
這裏是我的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');
});