选择表格行并使用 Twitter Bootstrap 保持突出显示
Posted
技术标签:
【中文标题】选择表格行并使用 Twitter Bootstrap 保持突出显示【英文标题】:Select table row and keep highlighted using Twitter Bootstrap 【发布时间】:2015-10-22 04:47:39 【问题描述】:我正在使用带有可点击行的 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');
【问题讨论】:
【参考方案1】:你很接近。在您的 $("#myTable").on(...)
事件上定位 .clickable-row
类并使用 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>
$('#myTable').on('click', '.clickable-row', function(event)
$(this).addClass('active').siblings().removeClass('active');
);
还有一个Bootply Example
注意:如果您将.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 的答案。
【讨论】:
重新单击该行不会取消选择它。 此解决方案存在一个错误 - 您可以选择 多个 行(准确地说,每页一个)。使用table.$('tr.active').removeClass('active');
似乎可以解决问题。【参考方案2】:
试试:
$(".clickable-row").click(function()
if($(this).hasClass("highlight"))
$(this).removeClass('highlight');
else
$(this).addClass('highlight').siblings().removeClass('highlight');
)
【讨论】:
这就是 toggleClass 派上用场的地方。【参考方案3】:要显示一种颜色的绘制行,表示被选中,可以使用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;
我希望它对你有用,你好。
【讨论】:
欢迎来到 Stack Overflow!如果您还没有,请随时查看how to ask 和what's on-topic here。 另外,我会注意到,使用函数声明(即function foo() ...
)而不是隐式全局赋值(如foo = function () ...
)通常更惯用。这样做的另一个好处是it also works in strict mode.【参考方案4】:
我在 bootstrap-table 上使用过这个脚本。
$('#tb-pegawai').on('change', 'tr' , function (event)
if($('.selected')) // )
【讨论】:
以上是关于选择表格行并使用 Twitter Bootstrap 保持突出显示的主要内容,如果未能解决你的问题,请参考以下文章
Twitter Bootstrap 在表格单元格上使用 collapse.js [几乎完成]
在 MySQL Workbench 中选择前 1000 行并生成标题列表