スタイルが適用された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

また、私はあなたのJSが仕事に行くされていることを確認することはできません、あなたが（すでにしているので、

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

それとも

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

をお試しくださいあなたの例）jQueryをロードすると、あなたを助けるかもしれないスニペットがあります。 CSSで

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

Here's my jsFiddle

ルールが最も具体的な規則が勝つということです。だから、ルールが勝てる行の背景色を定義するときには、table.gridtable tdがありました。なぜ重要なのかわかりません！あなたのサンプルコードでは重要ではありませんでしたが、絶対に必要でない限り、重要なタグから離れておくことをお勧めします。

私の答えでは、table.gridtable tr.red tdに.redクラスを適用したので、table.gridtable tdより具体的です。これは、選択されたtrが赤色の背景色を有することになるはずである。さらに、私の2番目の例では、同じルールを適用しながら他の場所で使用したい場合に備えて.redクラスを保存しました。