選擇表中的每4行

有沒有辦法在表格中選擇4行並將其背景設爲紅色並選擇接下來的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>

來源

2016-03-02 Juliver Galleto

我想建議你學習CSS第n個孩子要做到這一點，如：類：第n個孩子（N％8> = 4）{背景：紅}和類：第n個孩子（n％8 <4）{背景：藍色}，如果您只喜歡使用兩種顏色。 –

如果你正在尋找一個純CSS的解決方案，你可以做這樣的事情：

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; 
 

 
}

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

來源

2016-03-02 03:44:28

酷但問題是，行數是動態的如表有80行或112行。有任何想法嗎？ –

現在酷了它的工作。謝謝。 –

小心使用「背景」速記並僅提供一個值。任何[未提供的值都將設置爲初始值]（https://developer.mozilla.org/en-US/docs/Web/CSS/Shorthand_properties），這可能不是所期望的。如果只設置'color'，則使用'background-color'更安全。 – steveax

還，您可以使用JS收集所有TR-的元素和設置每行的背景顏色，只要你喜歡：

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

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

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

https://jsfiddle.net/8cvpubto

來源

2016-03-02 10:17:02

這是什麼「color =='pink'？color ='lightblue'：color ='pink';」意思？ –

這是用於定義兩種顏色之間的表格行的當前顏色的表達式：粉紅色和淺藍色。 corse，你可以根據你的需要改變它 –

選擇表中的每4行

回答

相關問題