javascript - 更改已应用样式的 html 表格行颜色

Question

我有一个应用了样式的简单表格。

我需要的是改变表格的一行颜色。

如果表格没有应用样式，它工作正常，但一旦有样式，我就不能再更改行颜色。

尝试通过应用新类或直接(甚至尝试使用 !important)以及使用或不使用 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，这里有一个可能对您有所帮助的代码片段。

$("#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 类，以防您想在其他地方使用它，同时保持应用相同的规则。