Question

有没有办法可以在表中选择4行并使其背景为红色并选择接下来的4行并使其背景为蓝色？它有点像奇数和偶数，但以不同的方式选择一组行。请提出任何想法，帮助，建议，线索，建议吗？

<table>
  <!--- odd -->
  <tr>
    <td>NAME</td><td>AGE</td>
  </tr>
  <tr>
    <td>NAME</td><td>AGE</td>
  </tr>
  <tr>
    <td>NAME</td><td>AGE</td>
  </tr>
  <tr>
    <td>NAME</td><td>AGE</td>
  </tr>
  <!--- even -->
  <tr>
    <td>NAME</td><td>AGE</td>
  </tr>
  <tr>
    <td>NAME</td><td>AGE</td>
  </tr>
  <tr>
    <td>NAME</td><td>AGE</td>
  </tr>
  <tr>
    <td>NAME</td><td>AGE</td>
  </tr>
  <!--- odd -->
  <tr>
    <td>NAME</td><td>AGE</td>
  </tr>
  <tr>
    <td>NAME</td><td>AGE</td>
  </tr>
  <tr>
    <td>NAME</td><td>AGE</td>
  </tr>
  <tr>
    <td>NAME</td><td>AGE</td>
  </tr>
</table>

Answer 1

如果您正在寻找纯css解决方案，您可以执行以下操作：

＆＃13;

table tr:nth-of-type(n) {

  background: blue;

}

table tr:nth-of-type(8n),

table tr:nth-of-type(8n-1),

table tr:nth-of-type(8n-2),

table tr:nth-of-type(8n-3) {

  background: red;

}

＆＃13;

<table>
  <!--- odd -->
  <tr>
    <td>NAME</td>
    <td>AGE</td>
  </tr>
  <tr>
    <td>NAME</td>
    <td>AGE</td>
  </tr>
  <tr>
    <td>NAME</td>
    <td>AGE</td>
  </tr>
  <tr>
    <td>NAME</td>
    <td>AGE</td>
  </tr>
  <!--- even -->
  <tr>
    <td>NAME</td>
    <td>AGE</td>
  </tr>
  <tr>
    <td>NAME</td>
    <td>AGE</td>
  </tr>
  <tr>
    <td>NAME</td>
    <td>AGE</td>
  </tr>
  <tr>
    <td>NAME</td>
    <td>AGE</td>
  </tr>
  <!--- odd -->
  <tr>
    <td>NAME</td>
    <td>AGE</td>
  </tr>
  <tr>
    <td>NAME</td>
    <td>AGE</td>
  </tr>
  <tr>
    <td>NAME</td>
    <td>AGE</td>
  </tr>
  <tr>
    <td>NAME</td>
    <td>AGE</td>
  </tr>
  <tr>
    <td>NAME</td>
    <td>AGE</td>
  </tr>
  <tr>
    <td>NAME</td>
    <td>AGE</td>
  </tr>
  <tr>
    <td>NAME</td>
    <td>AGE</td>
  </tr>
  <tr>
    <td>NAME</td>
    <td>AGE</td>
  </tr>
  <tr>
    <td>NAME</td>
    <td>AGE</td>
  </tr>
  <tr>
    <td>NAME</td>
    <td>AGE</td>
  </tr>
  <tr>
    <td>NAME</td>
    <td>AGE</td>
  </tr>
  <tr>
    <td>NAME</td>
    <td>AGE</td>
  </tr>
  <tr>
    <td>NAME</td>
    <td>AGE</td>
  </tr>
  <tr>
    <td>NAME</td>
    <td>AGE</td>
  </tr>
  <tr>
    <td>NAME</td>
    <td>AGE</td>
  </tr>
  <tr>
    <td>NAME</td>
    <td>AGE</td>
  </tr>
  <tr>
    <td>NAME</td>
    <td>AGE</td>
  </tr>
  <tr>
    <td>NAME</td>
    <td>AGE</td>
  </tr>
  <tr>
    <td>NAME</td>
    <td>AGE</td>
  </tr>
  <tr>
    <td>NAME</td>
    <td>AGE</td>
  </tr>
</table>

＆＃13;

Answer 2

另外，您可以使用JS收集所有tr元素并根据需要设置每行的背景颜色：

＆＃13;

var trList = document.getElementsByTagName('tr');
var n = 0;
var color = 'pink';
for(var key in trList) {
	var trElem = trList[key];
	if( n > 3 ) {
  	n = 0;
    color == 'pink' ? color = 'lightblue' : color = 'pink';
  }
  trElem.style.backgroundColor = color;
	n++;
}

＆＃13;

table { border-collapse:collapse; }
td { border: 1px solid #000; }

＆＃13;

<table>
  <!--- odd -->
  <tr>
    <td>NAME</td><td>AGE</td>
  </tr>
  <tr>
    <td>NAME</td><td>AGE</td>
  </tr>
  <tr>
    <td>NAME</td><td>AGE</td>
  </tr>
  <tr>
    <td>NAME</td><td>AGE</td>
  </tr>
  <!--- even -->
  <tr>
    <td>NAME</td><td>AGE</td>
  </tr>
  <tr>
    <td>NAME</td><td>AGE</td>
  </tr>
  <tr>
    <td>NAME</td><td>AGE</td>
  </tr>
  <tr>
    <td>NAME</td><td>AGE</td>
  </tr>
  <!--- odd -->
  <tr>
    <td>NAME</td><td>AGE</td>
  </tr>
  <tr>
    <td>NAME</td><td>AGE</td>
  </tr>
  <tr>
    <td>NAME</td><td>AGE</td>
  </tr>
  <tr>
    <td>NAME</td><td>AGE</td>
  </tr>
  <!--- even -->
  <tr>
    <td>NAME</td><td>AGE</td>
  </tr>
  <tr>
    <td>NAME</td><td>AGE</td>
  </tr>
  <tr>
    <td>NAME</td><td>AGE</td>
  </tr>
  <tr>
    <td>NAME</td><td>AGE</td>
  </tr>
  <!--- odd -->
  <tr>
    <td>NAME</td><td>AGE</td>
  </tr>
  <tr>
    <td>NAME</td><td>AGE</td>
  </tr>
  <tr>
    <td>NAME</td><td>AGE</td>
  </tr>
  <tr>
    <td>NAME</td><td>AGE</td>
  </tr>
</table>

＆＃13;

https://jsfiddle.net/8cvpubto

选择表格中的每4行

2 个答案: