更改 HTML 表格中整行的背景颜色

Question

我有一个动态表，其中的数据来自 API。我正在使用 JavaScript 生成表格并插入行。

一切正常，但问题在于样式。

我的表格行颜色被剥离（就像我们使用引导表格条带化类一样）并且每一行中的单元格都不相同。

有些有 3 个，有些有 6 个，有些有 4 个等。在单元格较少的地方，它们会显示一些空白区域。

有什么方法可以给整行着色。这是一个例子。这是我的代码示例：

.table-striped th {
  height: 45px;
  background-color: #bfff00 !important;
  color: #191919;
}

.table-striped td {
  padding: 8px;
  border: 2px solid #F6F6F6;
  font-weight: bold;
}

.table-striped>tr:nth-child(n+1)>td {
  background-color: #bababa;
}

.table-striped>tr:nth-child(n+2)>td {
  background-color: #e8e7e6;
}

<div>
  <table class="table-striped">
    <tr>
      <th>Header 1</th>
      <th>Header 2</th>
      <th>Header 3</th>
      <th>Header 4</th>
      <th>Header 5</th>
      <th>Header 6</th>
      <th>Header 7</th>
      <th>Header 8</th>
    </tr>
    <tr>
      <td>Cell 1</td>
      <td>Cell 2</td>
      <td>Cell 3</td>
    </tr>
    <tr>
      <td>Cell 1</td>
      <td>Cell 2</td>
      <td>Cell 3</td>
      <td>Cell 4</td>
      <td>Cell 5</td>
      <td>Cell 6</td>
      <td>Cell 7</td>
      <td>Cell 8</td>
    </tr>
    <tr>
      <td>Cell 1</td>
      <td>Cell 2</td>
      <td>Cell 3</td>
      <td>Cell 4</td>
      <td>Cell 5</td>
    </tr>
  </table>
</div>

这里是jsfiddle

Answer 1

表格行的宽度仅与单元格的数量一样宽。

当您没有完整的行时添加最后一个单元格并酌情使用colspan。

.table-striped th {
  height: 45px;
  background-color: #bfff00 !important;
  color: #191919;
}

.table-striped td {
  padding: 8px;
  border: 2px solid #F6F6F6;
  font-weight: bold;
}

.table-striped tr:nth-child(odd) {
  background-color: #bababa;
}

.table-striped tr:nth-child(even) {
  background-color: #e8e7e6;
}

<div>
  <table class="table-striped">
    <tr>
      <th>Header 1</th>
      <th>Header 2</th>
      <th>Header 3</th>
      <th>Header 4</th>
      <th>Header 5</th>
      <th>Header 6</th>
      <th>Header 7</th>
      <th>Header 8</th>
    </tr>
    <tr>
      <td>Cell 1</td>
      <td>Cell 2</td>
      <td>Cell 3</td>
      <td colspan="5"></td>
    </tr>
    <tr>
      <td>Cell 1</td>
      <td>Cell 2</td>
      <td>Cell 3</td>
      <td>Cell 4</td>
      <td>Cell 5</td>
      <td>Cell 6</td>
      <td>Cell 7</td>
      <td>Cell 8</td>
    </tr>
    <tr>
      <td>Cell 1</td>
      <td>Cell 2</td>
      <td>Cell 3</td>
      <td>Cell 4</td>
      <td>Cell 5</td>
      <td colspan="3"></td>
    </tr>
  </table>
</div>

MDN 的注意事项：

应用于<tr> 元素的任何样式都会影响其中的单元格 该行除非被应用于这些单元格的样式覆盖。

特别注意它设置单元格的样式，而不是行本身

编辑

我们从您的问题和 cmets 得知您正在使用 javascript 来生成表格。我们无法推断出您是如何执行此操作的，但如果您逐行生成表格，您应该能够查看您为该行生成的单元格数量是否等于th 单元格的数量。如果不是，请添加一个具有差异的单元格作为colspan。如果您不能这样做，您可以在创建表之后进行。

这是一种粗略的做法

function addColspan(table) {
  //Assume number of th are our max cells per row
  var maxCells = table.querySelectorAll("th").length;
  
  //Get all rows but the first
  var rows = table.querySelectorAll("tr:nth-child(n+2)");
  for(var i = 0; i < rows.length; i++){
    //Get how many cells we have
    var cellCount = rows[i].querySelectorAll("td").length;
    //If we don't have enough cells
    if(cellCount < maxCells) {
      //Add one with the appropriate colspan
      rows[i].innerHTML += "<td colspan='" + (maxCells - cellCount) + "'></td>";
    }
  }
}

//Run after table is generated
addColspan(document.querySelector(".table-striped"));

.table-striped th {
  height: 45px;
  background-color: #bfff00 !important;
  color: #191919;
}

.table-striped td {
  padding: 8px;
  border: 2px solid #F6F6F6;
  font-weight: bold;
}

.table-striped tr:nth-child(odd) {
  background-color: #bababa;
}

.table-striped tr:nth-child(even) {
  background-color: #e8e7e6;
}

<div>
  <table class="table-striped">
    <tr>
      <th>Header 1</th>
      <th>Header 2</th>
      <th>Header 3</th>
      <th>Header 4</th>
      <th>Header 5</th>
      <th>Header 6</th>
      <th>Header 7</th>
      <th>Header 8</th>
    </tr>
    <tr>
      <td>Cell 1</td>
      <td>Cell 2</td>
      <td>Cell 3</td>

    </tr>
    <tr>
      <td>Cell 1</td>
      <td>Cell 2</td>
      <td>Cell 3</td>
      <td>Cell 4</td>
      <td>Cell 5</td>
      <td>Cell 6</td>
      <td>Cell 7</td>
      <td>Cell 8</td>
    </tr>
    <tr>
      <td>Cell 1</td>
      <td>Cell 2</td>
      <td>Cell 3</td>
      <td>Cell 4</td>
      <td>Cell 5</td>
    </tr>
  </table>
</div>

Answer 2

您可以在 css 中使用 even 和 odd 属性。 看看这个

.table-striped th {
  height: 45px;
  background-color: #bfff00 !important;
  color: #191919;
}

.table-striped td {
  padding: 8px;
  border: 2px solid #F6F6F6;
  font-weight: bold;
}

.table-striped tr:nth-child(odd) td {
  background-color: #bababa;
}

.table-striped tr:nth-child(even) td {
  background-color: #e8e7e6;
}

<div>
  <table class="table-striped">
    <tr>
      <th>Header 1</th>
      <th>Header 2</th>
      <th>Header 3</th>
      <th>Header 4</th>
      <th>Header 5</th>
      <th>Header 6</th>
      <th>Header 7</th>
      <th>Header 8</th>
    </tr>
    <tr>
      <td>Cell 1</td>
      <td>Cell 2</td>
      <td>Cell 3</td>
    </tr>
    <tr>
      <td>Cell 1</td>
      <td>Cell 2</td>
      <td>Cell 3</td>
      <td>Cell 4</td>
      <td>Cell 5</td>
      <td>Cell 6</td>
      <td>Cell 7</td>
      <td>Cell 8</td>
    </tr>
    <tr>
      <td>Cell 1</td>
      <td>Cell 2</td>
      <td>Cell 3</td>
      <td>Cell 4</td>
      <td>Cell 5</td>
    </tr>
  </table>
</div>

---

评论后更新了答案。您需要将 aleast 设为空才能突出显示完整的行。

.table-striped th {
  height: 45px;
  background-color: #bfff00 !important;
  color: #191919;
}

.table-striped td {
  padding: 8px;
  border: 2px solid #F6F6F6;
  font-weight: bold;
}

.table-striped tr:nth-child(odd) td {
  background-color: #bababa;
}

.table-striped tr:nth-child(even) td {
  background-color: #e8e7e6;
}

<div>
  <table class="table-striped">
    <tr>
      <th>Header 1</th>
      <th>Header 2</th>
      <th>Header 3</th>
      <th>Header 4</th>
      <th>Header 5</th>
      <th>Header 6</th>
      <th>Header 7</th>
      <th>Header 8</th>
    </tr>
    <tr>
      <td>Cell 1</td>
      <td>Cell 2</td>
      <td>Cell 3</td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
    </tr>
    <tr>
      <td>Cell 1</td>
      <td>Cell 2</td>
      <td>Cell 3</td>
      <td>Cell 4</td>
      <td>Cell 5</td>
      <td>Cell 6</td>
      <td>Cell 7</td>
      <td>Cell 8</td>
    </tr>
    <tr>
      <td>Cell 1</td>
      <td>Cell 2</td>
      <td>Cell 3</td>
      <td>Cell 4</td>
      <td>Cell 5</td>
      <td></td>
      <td></td>
      <td></td>
    </tr>
  </table>
</div>