我正在使用Twitter Bootstrap表,其中可点击的行在悬停时突出显示(如果它更容易,我可以摆脱悬停功能)。我希望所选行保持突出显示,直到单击另一行或重新点击它。
$( document ).ready(function() {
$('#myTable').on('click', 'tbody tr', function(event) {
// console.log("test ");
});
和表格
<table class="table table-bordered table-hover" id="myTable">
<tbody>
<tr>
<tr class='clickable-row'>
我在JS中尝试了这段代码,但没有工作
$(this).addClass('highlight').siblings().removeClass('highlight');
答案 0 :(得分:45)
你很亲密。在.clickable-row
事件上定位$("#myTable").on(...)
类并使用Bootstrap的.active
类应该适合您:
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:
$('#myTable').on('click', '.clickable-row', function(event) {
$(this).addClass('active').siblings().removeClass('active');
});
注意:如果您在桌面上留下.table-hover
,则必须使用与.active
不同的课程,例如.bg-info
(这将是blue hightlight )
要从行中删除突出显示(即再次单击),请检查该行是否包含该类并将其删除:
$('#myTable').on('click', '.clickable-row', function(event) {
if($(this).hasClass('active')){
$(this).removeClass('active');
} else {
$(this).addClass('active').siblings().removeClass('active');
}
});
请参阅@ BravoZulu的原始信息答案。
答案 1 :(得分:7)
尝试:
$(".clickable-row").click(function(){
if($(this).hasClass("highlight"))
$(this).removeClass('highlight');
else
$(this).addClass('highlight').siblings().removeClass('highlight');
})
答案 2 :(得分:2)
要显示颜色的彩绘行,表明它已被选中,您可以使用data-row-style = 'formatterRowUtSelect'
在您的代码中,您可以添加此方法:
formatterRowUtSelect = function (row, index) {
if (row.fieldOfMyObject == $ ('#fieldOfMyObject'). val ())
return {classes: 'row-selected'};
return {};
}
不要忘记为所选行创建css:
.row-selected {
background-color: #a9f0ff !important;
font-weight: bold;
}
我希望它能为你服务,问候。
答案 3 :(得分:0)
我在bootstrap-table上使用过这个脚本。
$('#tb-pegawai').on('change', 'tr' , function (event) {
if($('.selected')){ // } })