我将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');
你很亲密 针对.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
(这将是蓝色的亮点)
要从该行中删除突出显示(即再次单击),请检查该行是否具有该类并将其删除:
$('#myTable').on('click', '.clickable-row', function(event) {
if($(this).hasClass('active')){
$(this).removeClass('active');
} else {
$(this).addClass('active').siblings().removeClass('active');
}
});
有关原始信息,请参见@BravoZulu的答案。
尝试:
$(".clickable-row").click(function(){
if($(this).hasClass("highlight"))
$(this).removeClass('highlight');
else
$(this).addClass('highlight').siblings().removeClass('highlight');
})
要显示已绘制的颜色行(表示已选中),可以使用 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;
}
希望它为您服务,问候。
我在引导表上使用了此脚本。
$('#tb-pegawai').on('change', 'tr' , function (event) {
if($('.selected')){ // } })
本文地址:http://jquery.askforanswer.com/xuanzebiaoxingbingshiyongtwitter-bootstraptuchuxianshi.html
文章标签:css , jquery , twitter-bootstrap , twitter-bootstrap-3
版权声明:本文为原创文章,版权归 admin 所有,欢迎分享本文,转载请保留出处!
文章标签:css , jquery , twitter-bootstrap , twitter-bootstrap-3
版权声明:本文为原创文章,版权归 admin 所有,欢迎分享本文,转载请保留出处!
评论已关闭!