스타일이 적용된 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 규칙이 승리 할 행의 배경색을 정의 할 때. 왜 중요한지는 모르겠다! 중요한 것은 예제 코드에서 작동하지 않지만 절대적으로 필요한 경우가 아니면 중요한 태그로부터 멀리 떨어져있을 것을 제안한다.

제 대답은 table.gridtable tr.red td에 .red 클래스를 적용하여 table.gridtable td보다 구체적입니다. 이렇게하면 선택한 tr이 빨간색 배경색을 갖게됩니다. 또한 두 번째 예에서는 .red 클래스를 그대로 유지하면서 다른 곳에서 사용하려는 경우를 대비하여 .red 클래스를 유지했습니다.