將Bootstrap錶行重置爲「Stripe」風格

我正在使用Bootstrap來顯示錶。我當前的功能是讓用戶在表格中選擇一行，然後頁面上的表單將填充選定行中的信息。將Bootstrap錶行重置爲「Stripe」風格

我也試圖讓用戶可以明確地看到哪一行被選中。

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

的問題是，我也是用引導的table-striped類及以上的jQuery覆蓋任何的是，這意味着風格，必須重新申請。

我知道有像這樣的解決方法，只是樣式行的前景文本，但我真的更喜歡改變整個行的背景，使其更突出，如果它不會太多麻煩。

我不確切知道Bootstrap對條紋表使用的顏色，在上面的jQuery中重新實現條紋顏色似乎是多餘的。

是否有一種相對簡單的方法來「重置」表的其餘部分，以便所有非選定的行都符合Bootstrap條帶表規則？

來源

2016-08-21 David Mordigal

不要更改CSS。改爲添加和刪除類。 – Malk

@Malk所以我在我的樣式表中添加了這個類： 'tr.selected {color：white;背景：royalblue; }' 而在jQuery的： '$（本）.addClass（「選擇」）;'' $（「TR」）不是（這個）.removeClass（「選擇」）;' 但是當。一個條紋行被選中，它不會改變背景顏色，只會改變前景顏色。它只適用於非條紋行。 –

嘗試'tr.selected> td {color：white;背景：royalblue; }' – Malk

謝謝Malk的幫助。這是我加入到我的CSS文件：

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

而在jQuery的：

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

來源

2016-08-21 02:34:50

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

或

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

來源

2016-08-21 02:24:18 Juliano

將Bootstrap錶行重置爲「Stripe」風格

回答

相關問題