javascript – Bootstrap table-striped不会改变颜色

正如你最近在我的问题的历史中看到的那样,我正在尝试理解 Jquery / Javascript :)我遇到了以下问题,并想向你们提出这个问题.

我有下表(注意：这是由inspect元素抓取的HTML,我不知道为什么style =“background-color：rgb(255,255,255);是吗…)：

<table class="table table-striped table-condensed" id="instance-table">
    <thead>
        <tr id="checkrow">
            <th><input type="checkBox" id="checkall"></th>
            <th>Column A</th>
            <th>Column A</th>
            <th>Column A</th>
        </tr>
    </thead>
    <tbody id="instanceInnerContent">
        <tr style="background-color: rgb(255,255);">
            <td class="act"><input type="checkBox"></td>
            <td>Value 1</td>
            <td>Value 2</td>
        </tr>
            <tr style="background-color: rgb(255,255);">
            <td class="act"><input type="checkBox"></td>
            <td>Value 1</td>
            <td>Value 2</td>
        </tr>
    </tbody>
</table>

并使用以下代码选择行或选择所有行或选择行单击：

// if user clicks on checkBox with id="checkall" - all checkBoxes are selected
// and table row background is highlighted
 $('body').on('click','#checkall',function () {
    $('input:checkBox:not(#checkall)').prop('checked',this.checked);
    if ($(this).is(':checked') == true) {
        $("#instance-table").find('tr:not(#checkrow)').css("background-color","#ccc");
        //$('#instance-action').removeAttr('disabled');
    } else  {
        $("#instance-table").find('tr:not(#checkrow)').css("background-color","#fff");
        //$('#instance-action').attr('disabled','disabled');
    }
});  

// if user clicks on checkBox,diffrent than checkBox with id="checkall",// then checkBox is checked/unchecked
$('body').on('click','input:checkBox:not(#checkall)',function () {
    if($("#checkall").is(':checked') == true && this.checked == false) {
        $("#checkall").prop('checked',false);
        $(this).closest('tr').css("background-color","#ffffff");
    }
    if(this.checked == true) {
        $(this).closest('tr').css("background-color","#ccc");
        //$('#instance-action').removeAttr('disabled');
        // function to check/uncheck checkBox with id="checkBox"
        CheckSelectAll(); 
    }
    if(this.checked == false)  {
        $(this).closest('tr').css("background-color","#ffffff");
        //$('#instance-action').attr('disabled','disabled');
    }
});

// if user clicks,someware on table row,checkBox is checked/unchecked
// and table row background is highlighted or not
$('body').on('click','#instance-table tbody tr',function () {
    var this_row = $(this);
    var checkBox = this_row.find('input:checkBox');
    if (event.target.type !== 'checkBox') {    
        if ( checkBox.is(':checked') == false ) {
            checkBox.prop('checked',true);
            this_row.css("background-color","#ccc");
            //$('#instance-action').removeAttr('disabled');
            CheckSelectAll();
        } else {
            checkBox.prop('checked',false);
            this_row.css("background-color","#fff");
            //$('#instance-action').attr('disabled','disabled');
            CheckSelectAll();
        }
    }    
});

function CheckSelectAll() {
 var flag = true;
 $('input:checkBox:not(#checkall)').each(function() {
  if(this.checked == false)
   flag = false;
   //console.log(flag);
 });
  $("#checkall").attr('checked',flag);
 }

但不知怎的,条纹表行没有突出显示,怎么样？
虽然代码已经在这里,但我还有一个问题,即如果我手动检查每一行,它不会检查checkall复选框.当我手动检查checkall复选框时,取消选中每个复选框,然后再次手动检查每一行.我找不到错误.

解决方法

似乎bootstrap设置每个td背景颜色.因此,即使添加！important,将tr设置为背景颜色也不起作用.我通过为每个具有所需背景颜色的td添加一个类来解决它

CSS：

.selected { background-color: #ddd !important; }

码：

注意：代码是函数的一部分,它检查是否单击了行的第一个td内的复选框.

$(this).parent().parent().children('td').each(function() {
 $(this).addClass("selected");
});

它可能不是一个简洁的解决方案,但它的工作:)

javascript – Bootstrap table-striped不会改变颜色

解决方法

猜你在找的JavaScript相关文章