在每个 [重复] 创建 tr 时，在奇数和偶数之间添加不同的背景颜色

Posted 2023-03-05

【中文标题】在每个 [重复] 创建 tr 时，在奇数和偶数之间添加不同的背景颜色

【英文标题】：add different background color between odd and even when creating tr in each [duplicate]

【发布时间】：2017-07-15 13:29:51

【问题描述】：

 var rowCount = 0;
 var trCount;

  // Set start each at second tr
  $('#list tr').each(function(index, tr) 
    // Count
    rowCount++;

    // Create tr
    trCount = $('<tr/>');

    // Create row number 1,2,3
    trCount.append("<td>" + rowCount + "</td>");

    // Append tr to display table
    tableContent.append(trCount);
  );

我正在使用 tr 为我的表创建 tr，但我的意图是奇数和偶数 tr 编号之间会有不同的背景颜色，那么我该怎么做呢？

类似的东西

$("tr:odd").css("background-color", "#E5E5E5");
$("tr:even:gt(0)").css("background-color", "#c7d4e5");

创建<tr>时如何添加不同的背景颜色。

【参考方案1】：

您可以在纯 CSS 中执行此操作，并且无论您使用多少 javascript，它都会应用。

tr:nth-of-type(even) 
    background-color:#E5E5E5;

tr:nth-of-type(odd) 
    background-color:#c7d4e5;

【讨论】：

@PatrickMoore，您可能不会同意这一点，但 w3s 另有说法：w3schools.com/cs-s-ref/sel_nth-of-type.asp

一个更好的参考可能是caniuse.com/#feat=css-sel3

感谢@MikeMcCaughan，我尝试先查看caniuse，但找不到我要找的对象。

@Andreas 没问题 :)