Question

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

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

如果表格没有应用样式，它可以正常工作，但只要有样式，我就不能再改变行颜色了。

试图通过应用新类或直接（甚至尝试使用！important）和使用或不使用jQuery来更改颜色。

＆＃13;

$(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);
    }
  })

}

＆＃13;

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;
}

＆＃13;

<!--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>

＆＃13;

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标签，除非绝对必要。

在我的回答中，我将.red类应用于table.gridtable tr.red td，因此比table.gridtable td更具体。这应该导致所选择的tr具有红色背景颜色。另外，在我的第二个例子中，我保留了.red类，以防你想在其他地方使用它，同时保持应用相同的规则。

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

1 个答案: