更改具有應用樣式的html表格行顏色

Question

我有一個應用了樣式的簡單表格。

我需要的是改變表格的行顏色。

如果表格沒有應用樣式，它會正常工作，但只要有樣式，我就不能再更改行顏色。

試圖改變應用一個新類的顏色或直接（甚至嘗試！重要）和有或沒有jQuery。

$(document).ready(readyToGo); 
 

 
function readyToGo(jQuery) { 
 
    $('input').prop('disabled', false); 
 
} 
 

 
function displayData(jsonData) { 
 
    var posta; 
 
    for (var i = 0; i < jsonData.length; i++) { 
 
    posta = jsonData[i][2]; 
 

 
    $('#myTable').append("<tr><td>" + jsonData[i][0] + "</td><td>" + jsonData[i][1] + "</td><td>" + posta + "</td><td>" + jsonData[i][3] + "</td><td>" + jsonData[i][4] + "</td></tr>") 
 
    } 
 

 
    document.getElementById("myTable").rows[1].className = "red"; 
 
    //document.getElementById("myTable").rows[1].style.backgroundColor = "red";  
 
    //$('#myTable tr:eq(1)').css('background-color', '#f00'); 
 
} 
 

 
function parseData(files) { 
 
    var selectedFile = files[0]; 
 

 
    Papa.parse(selectedFile, { 
 
    complete: function(results) { 
 
     displayData(results.data); 
 
    } 
 
    }) 
 

 
}

table.gridtable { 
 
    font-family: verdana, arial, sans-serif; 
 
    font-size: 11px; 
 
    color: #333333; 
 
    border-width: 1px; 
 
    border-color: #666666; 
 
    border-collapse: collapse; 
 
} 
 
table.gridtable th { 
 
    border-width: 1px; 
 
    padding: 8px; 
 
    border-style: solid; 
 
    border-color: #666666; 
 
    background-color: #dedede; 
 
} 
 
table.gridtable td { 
 
    border-width: 1px; 
 
    padding: 8px; 
 
    border-style: solid; 
 
    border-color: #666666; 
 
    background-color: #ffffff; 
 
} 
 
.red { 
 
    background-color: #ff0000 !important; 
 
}

<!--script src="/Posta/javascript/papaparse.js"></script> 
 
<script src="/Posta/javascript/jquery-3.1.0.js"></script--> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<form action="/Posta/MainServlet"> 
 

 
    CSV datoteka&nbsp; 
 
    <input type="file" id="input" onchange="parseData(this.files)" disabled/> 
 
</form> 
 
<hr> 
 
<table id="myTable" class="gridtable"> 
 
    <tbody> 
 
    <tr> 
 
     <th>Ime</th> 
 
     <th>Prezime</th> 
 
     <th>PBR</th> 
 
     <th>Grad</th> 
 
     <th>Telefon</th> 
 
    </tr> 
 
    </tbody> 
 
</table>

Answer 1

嘗試

table.gridtable tr.red td { 
    background-color: #ff0000; 
} 

或者

.red, table.gridtable tr.red td { 
    background-color: #ff0000; 
} 

我也無法確認你的JS是去工作和，因爲你已經（在你的例子）加載jQuery這裏是一個snippit，可能會幫助你。

$("#myTable tr:eq(0)").addClass("red"); 
//where 0 is the first row. 

Here's my jsFiddle

隨着CSS規則是最具體的規則獲勝。所以當你有你的table.gridtable td定義規則將贏得的行的背景顏色。我不確定爲什麼！important在你的示例代碼中不起作用，但我建議遠離！important標籤，除非它是絕對必要的。

在我的回答中，我將.red類應用於table.gridtable tr.red td，因此它比table.gridtable td更具體。這應該會導致所選tr具有紅色背景色。此外，在我的第二個示例中，我保留了.red類，以防您在其他地方使用.red類，同時保持應用相同的規則。