jQuery 选择表格行并使用 Twitter Bootstrap 保持突出显示
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/31730363/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Select table row and keep highlighted using Twitter Bootstrap
提问by Jabda
I am using Twitter Bootstrap table with clickable rows that are highlighted when hovered over (I can get rid of the hover feature if it makes this easier). I want the selected row to remain highlighted until another row is clicked or it is reclicked.
我正在使用带有可点击行的 Twitter Bootstrap 表，当悬停在上面时会突出显示（如果它使这更容易，我可以摆脱悬停功能）。我希望所选行保持突出显示，直到单击另一行或重新单击它。
$( document ).ready(function() {
$('#myTable').on('click', 'tbody tr', function(event) {
// console.log("test ");
});
and the table
和桌子
<table class="table table-bordered table-hover" id="myTable">
<tbody>
<tr>
<tr class='clickable-row'>
I tried this code in the JS but didn't work
我在 JS 中尝试了这段代码，但没有奏效
$(this).addClass('highlight').siblings().removeClass('highlight');
回答by Tim Lewis
You are quite close. Targeting the .clickable-rowclass on your $("#myTable").on(...)event and using Bootstrap's .activeclass should work for you:
你很接近。.clickable-row在您的$("#myTable").on(...)活动中定位课程并使用 Bootstrap 的.active课程应该适合您：
HTML:
HTML：
<table class="table table-bordered" id="myTable">
<tr class="clickable-row">
<th>Example</th>
</tr>
<tr class="clickable-row">
<th>Example 2</th>
</tr>
</table>
Javascript:
Javascript：
$('#myTable').on('click', '.clickable-row', function(event) {
$(this).addClass('active').siblings().removeClass('active');
});
And a Bootply Example
和一个Bootply 示例
Note: If you left .table-hoveron your table, you'd have to use a different class than .active, such as .bg-info(which would be a blue hightlight)
注意：如果你留.table-hover在你的桌子上，你必须使用与 不同的类.active，例如.bg-info（这将是一个蓝色的高光）
To remove a highlight from the row (ie click again), check if the row has the class and remove it:
要从行中删除突出显示（即再次单击），请检查该行是否具有该类并将其删除：
$('#myTable').on('click', '.clickable-row', function(event) {
if($(this).hasClass('active')){
$(this).removeClass('active');
} else {
$(this).addClass('active').siblings().removeClass('active');
}
});
See @BravoZulu's answer for original information.
有关原始信息，请参阅 @BravoZulu 的回答。
回答by BravoZulu
Try:
尝试：
$(".clickable-row").click(function(){
if($(this).hasClass("highlight"))
$(this).removeClass('highlight');
else
$(this).addClass('highlight').siblings().removeClass('highlight');
})
回答by RyuSaky
To show the painted row of a color, indicating that it is selected, you can use data-row-style = 'formatterRowUtSelect'
要显示一种颜色的绘制行，表示它被选中，可以使用 data-row-style = 'formatterRowUtSelect'
Inside your code, you can add this method:
在您的代码中，您可以添加此方法：
formatterRowUtSelect = function (row, index) {
if (row.fieldOfMyObject == $ ('#fieldOfMyObject'). val ())
return {classes: 'row-selected'};
return {};
}
Do not forget to create the css for the selected row:
不要忘记为所选行创建 css：
.row-selected {
background-color: #a9f0ff !important;
font-weight: bold;
}
I hope it serves you, Greetings.
我希望它为您服务，您好。
回答by Sumari Marco
i have used this script on bootstrap-table.
我在引导表上使用了这个脚本。
$('#tb-pegawai').on('change', 'tr' , function (event) {
if($('.selected')){ // } })
