当您单击一个表行时,它会添加一个类来更改它的外观,以反映它被选中的情况。
$('#my_table tbody').on( 'click', 'tr', function () {
$(this).toggleClass('selected');
} );
但是,我在一个列中也有一些按钮,可以让您执行特定于该行的操作:
Item Amount Action
--------------------------------
Apple 10 [Buy] [Delete]
Banana 5 [Buy] [Delete]
Orange 14 [Buy] [Delete]
当我单击一个单独的按钮时,它也会触发添加表格行'.selected‘类,但我不希望在单击按钮时发生这种情况。
发布于 2019-06-01 12:31:11
您可以在单击按钮时使用Event.stopPropagation()
:
$('#my_table tbody').on( 'click', 'tr', function () {
$(this).toggleClass('selected');
} );
$('#my_table tbody').on( 'click', 'button', function (e) {
e.stopPropagation();
});
.selected{
background-color: red;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="my_table">
<thead>
<th>Item</th>
<th>Amount</th>
<th>Action</th>
</thead>
<tbody>
<tr>
<td>Apple</td>
<td>10</td>
<td><button>[Buy]</button><button>[Delete]</button></td>
</tr>
<tr>
<td>Banana</td>
<td>5</td>
<td><button>[Buy]</button><button>[Delete]</button></td>
</tr>
<tr>
<td>Orange</td>
<td>14</td>
<td><button>[Buy]</button><button>[Delete]</button></td>
</tr>
</tbody>
</table>
发布于 2019-06-01 12:25:35
您可以确保所单击的td
不在包含按钮的列中。使用:not
,可以确保匹配的元素不匹配特定的选择器;使用:nth-child
,可以将容器中的第三个td
指定为要排除的那个:
$('#my_table tbody').on('click', 'tr td:not(:nth-child(3))', function() {
console.log('click registered');
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="my_table">
<tr>
<td>td 1</td>
<td>td 2</td>
<td><button>button</button></td>
</tr>
</table>
发布于 2019-06-01 12:33:49
可以对按钮onclick事件使用stopPropagation()或preventDefault()。这将防止对按钮的父元素(td、tr、table等)的事件bubling。假设您的按钮类为'row-button‘,下面是一个示例代码:
$('.row-button').on('click', function(event)){
event.stopPropagation();
//Do what are intended upon button click.
}
https://stackoverflow.com/questions/56403820
复制相似问题