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

2021/01/28 21:31 · jquery ·  · 0评论

我将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');
  }
});

有关原始信息,请参见@Br​​avoZulu的答案。

尝试:

$(".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
文章标签: ,   ,   ,  
版权声明:本文为原创文章,版权归 admin 所有,欢迎分享本文,转载请保留出处!

文件下载

老薛主机终身7折优惠码boke112

上一篇:
下一篇:

评论已关闭!