样式表达式实现交替显示table行颜色

要实现交替显示table行颜色，可以使用样式表达式（CSS expression）。

样式表达式是一种JavaScript表达式，它可以在CSS规则中使用。它的语法类似于JavaScript，可以引用CSS属性值，计算表达式，调用函数等。

具体来说，我们可以在table的CSS规则中使用样式表达式，设置每行的背景颜色。假设我们要将表格的行背景颜色设置为相间的白色和灰色，可以使用下面的代码：

table tr:nth-child(even) {
  background-color: #f2f2f2; /* 偶数行白色背景 */
}
table tr:nth-child(odd) {
  background-color: #fff; /* 奇数行灰色背景 */
}

在这个代码中，我们使用了 :nth-child() 伪类选择器，用于选中table中指定位置的元素。其中 :nth-child(even) 用于选中表格中所有偶数位置的元素， :nth-child(odd) 用于选中表格中所有奇数位置的元素。

这种方法的优点是，当添加或删除行时，样式表达式会自动重计算应用，能够保持表格中行的交替颜色正确。

下面是两个使用样式表达式的表格示例：

<!-- 示例一：每四行交替颜色 -->
<table>
  <tr><td>1</td></tr>
  <tr><td>2</td></tr>
  <tr><td>3</td></tr>
  <tr><td>4</td></tr>
  <tr><td>5</td></tr>
  <tr><td>6</td></tr>
  <tr><td>7</td></tr>
  <tr><td>8</td></tr>
  <tr><td>9</td></tr>
  <tr><td>10</td></tr>
</table>

<style>
table tr:nth-child(4n+1), table tr:nth-child(4n+2) {
  background-color: #f2f2f2; /* 第1、2、5、6、9、10行白色背景 */
}
table tr:nth-child(4n+3), table tr:nth-child(4n+4) {
  background-color: #fff; /* 第3、4、7、8行灰色背景 */
}
</style>

在这个示例中，我们将每四行交替设置为白色和灰色。

<!-- 示例二：只针对指定的表格应用样式 -->
<div class="table-container">
  <table>
    <tr><td>1</td></tr>
    <tr><td>2</td></tr>
    <tr><td>3</td></tr>
    <tr><td>4</td></tr>
    <tr><td>5</td></tr>
  </table>
</div>

<style>
/* 仅作用于 class 为 table-container 的元素内的 table 元素 */
.table-container table tr:nth-child(even) {
  background-color: #f2f2f2; /* 偶数行白色背景 */
}
.table-container table tr:nth-child(odd) {
  background-color: #fff; /* 奇数行灰色背景 */
}
</style>

在这个示例中，我们使用了CSS选择器和样式表达式，只针对指定的表格应用样式。并且使用一个包裹元素 .table-container 来限定作用范围，防止样式影响到其他地方的表格。