Question

我正在使用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');

Answer 1

你很亲密。在.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');
});

和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的原始信息答案。

Answer 2

尝试：

$(".clickable-row").click(function(){
    if($(this).hasClass("highlight"))
        $(this).removeClass('highlight');
    else
        $(this).addClass('highlight').siblings().removeClass('highlight');
})

Answer 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;
}

我希望它能为你服务，问候。

Answer 4

我在bootstrap-table上使用过这个脚本。

$('#tb-pegawai').on('change', 'tr' , function (event) {
            if($('.selected')){ // } })

选择表格行并使用Twitter Bootstrap保持突出显示

4 个答案: