Question

我使用Bootstrap来显示表格。我当前的功能是让用户在表格中选择一行，然后页面上的表单将填充所选行的信息。

我也试图让用户明确查看选择了哪一行。

$("tr").click(function() {
    $(this).css("color", "white").css("background", "royalblue");
    $("tr").not(this).css("color", "black").css("background", "white");
});

问题是，我也在使用Bootstrap的table-striped类，上面的jQuery会覆盖任何一个，这意味着必须重新应用样式。

我知道有一些解决方法可以解决这个行的前景文本，但我真的更喜欢改变整行的背景，以使它更突出，如果它赢了＆＃39太麻烦了。

我不知道Bootstrap用于条带表的确切颜色，并且在上面的jQuery中重新实现条带颜色似乎是多余的。

是否有一种相对简单的方法来重置＆＃34;表的其余部分，以便所有未选择的行都遵循Bootstrap条带表规则？

Answer 1

$('tr').css({ color: 'inherit', background:'inherit' });

或

$('tr').removeAttr('style');

Answer 2

谢谢Malk的帮助。这是我添加到CSS文件中的内容：

tr.selected > td {
    color: white;
    background: royalblue;
}

在jQuery中：

$("tr").click(function() {
    $(this).addClass("selected");
    $("tr").not(this).removeClass("selected");
});

将Bootstrap表行重置为＆＃34; stripe＆＃34;样式

2 个答案: