twitter-bootstrap Bootstrap table-striped 不变色
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/14140051/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Bootstrap table-striped does not change color
提问by Tristan
As you can see in the history of my questions recently, I am trying to understand Jquery/Javascript :) I run into the following problem and would like to propose it to you guys.
正如您最近在我的问题历史中看到的那样，我正在尝试理解 Jquery/Javascript :) 我遇到了以下问题，想向你们提出这个问题。
I have the following table (note: this is the HTML grabbed by inspect element, I am not sure why style="background-color: rgb(255, 255, 255); is there..):
我有下表（注意：这是检查元素抓取的 HTML，我不确定为什么 style="background-color: rgb(255, 255, 255); is there..）：
<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, 255);">
<td class="act"><input type="checkbox"></td>
<td>Value 1</td>
<td>Value 2</td>
</tr>
<tr style="background-color: rgb(255, 255, 255);">
<td class="act"><input type="checkbox"></td>
<td>Value 1</td>
<td>Value 2</td>
</tr>
</tbody>
</table>
And using the following code to select the row or select them all or select on row click:
并使用以下代码选择行或全选或选择行单击：
// 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);
}
But somehow the striped table row does not get highlighted, how come? And while the code is here already, I also have a problem where it does not check the checkall checkbox if I check each row manually. It works when I manually check the checkall checkbox, uncheck each checkbox and then manually check each row again. I cannot find the error.
但不知何故，条纹表格行没有突出显示，这是怎么回事？虽然代码已经在这里，但我也有一个问题，如果我手动检查每一行，它不会检查 checkall 复选框。当我手动检查 checkall 复选框，取消选中每个复选框，然后再次手动检查每一行时，它会起作用。我找不到错误。
回答by Tristan
It seems bootstrap is setting every td background-color. So setting the tr to a background color does not work, even if you add !important. I solved it by adding a class to every td with the required background-color
似乎引导程序正在设置每个 td 背景颜色。因此，即使您添加了 !important，将 tr 设置为背景颜色也不起作用。我通过向每个具有所需背景颜色的 td 添加一个类来解决它
css:
css：
.selected { background-color: #ddd !important; }
code:
代码：
note: code is part of a function which checks if a checkbox within the first td of the row is clicked.
注意：代码是检查是否单击行的第一个 td 中的复选框的函数的一部分。
$(this).parent().parent().children('td').each(function() {
$(this).addClass("selected");
});
It might not be a neat solution, but it works :)
这可能不是一个巧妙的解决方案，但它有效:)
回答by kidwon
My experience with styling tables is that you should go for the cells of the row not the row itself.
我对样式表的经验是，您应该选择行的单元格而不是行本身。
$(this).closest('tr td').css("background-color","#ffffff");
$(this).closest('tr td').css("background-color","#ffffff");
回答by Muhammad Talha Akbar
$('#checkall').on("change", function() {
if(!$(this).is(":checked")) {
$(".checkbox").each( function() {
$(this).prop("checked" , false);
$(this).parent().parent().css({ "background" : "#fff" });
});
}
else {
$(".checkbox").each( function() {
$(this).prop("checked" , true);
$(this).parent().parent().css({ "background" : "#ccc" });
});
}
});
$(".checkbox").on("change", function() {
if ($(".checkbox:checked").length == $(".checkbox").length) {
$("#checkall").prop("checked" , true);
$(this).parent().parent().css({ "background" : "#ccc" });
}
else {
if($(this).is(":checked")) {
$("#checkall").prop("checked" , false);
$(this).parent().parent().css({ "background" : "#ccc" });
}
else {
$("#checkall").prop("checked" , false);
$(this).parent().parent().css({ "background" : "#fff" });
}
}
});?
