Html+Css+Js_之table每隔3行顯示不同的兩種顏色
<head>
<script type="text/javascript">
/**
最近因項目的需求，有這樣的一個問題：
一個table顯示n條記錄，每3行換一次顏色，例如：1，2，3行紅色背景，4，5，6行綠色背景，7，8，9行紅色背景...以此類推！
*/
window.onload=function() {
var tbl = document.getElementById("table"); // 先獲取table
var rows = tbl.getElementsByTagName("tr"); // 獲取裏面的行tr
for(i=0;i<rows.length;i++) { // 遍歷裏面的行
var j = parseInt(i/3); // 以每3行爲單位,j爲：3次0，3次1，3次2 ...
if(j%2==0){ // 再通過取模來設置每隔3行顯示不同的兩種顏色
rows[i].style.backgroundColor="#f00";
}else{
rows[i].style.backgroundColor="#0f0";
}
}
};
</script>
</head>
<body>
<table id="table" border="1" width="500px">
<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>
<tr><td>11</td></tr>
<tr><td>12</td></tr>
<tr><td>13</td></tr>
<tr><td>14</td></tr>
<tr><td>15</td></tr>
<tr><td>16</td></tr>
<tr><td>17</td></tr>
<tr><td>18</td></tr>
</table>
</body>
</html>
發表評論
所有評論
還沒有人評論，想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章
JavaScript 音頻插件和圖表插件
howler音頻插件 配置項及事件 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <s
JavaScript中的window對象
window對象：每一個該對象代表一個瀏覽器窗口 1.常用方法如下 open("要打開的頁面文件名","打開窗口在操作系統中的名稱(任何名稱都可以)", "toolbar=?,menubar=?,