本方案重点在于掌握table的 rows属性和 row的cells属性.
解决的问题:
例子: 奇偶列不同颜色显示
个人实际运用: 表格内部内容我想要让内容相对靠近, 奇数列靠右,偶数列靠左, 用以替换IE8不兼容的CSS3伪类选择器
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>测试表格奇偶列, IE8替代伪类选择器</title>
<script type="text/javascript">
window.onload = function(){
var tables = document.getElementsByTagName("table");
for (var i = 0; i < tables.length; i++) {
var rows = tables[i].rows;
for (var j = 0; j < rows.length; j++) {
var cells = rows[j].cells;
for (var k = 0; k < cells.length; k++) {
if( (k & 1 ) === 0){//奇数
cells[k].style.background = 'red';
}else{
cells[k].style.background = 'black';
}
}
}
}
}
</script>
</head>
<body>
<table>
<tr>
<td>11</td>
<td>12</td>
<td>13</td>
<td>14</td>
<td>15</td>
<td>16</td>
</tr>
<tr>
<td>21</td>
<td>22</td>
<td>23</td>
<td>24</td>
<td>25</td>
<td>26</td>
</tr>
<tr>
<td>31</td>
<td>32</td>
<td>33</td>
<td>34</td>
<td>35</td>
<td>36</td>
</tr>
<tr>
<td>41</td>
<td>42</td>
<td>43</td>
<td>44</td>
<td>45</td>
<td>46</td>
</tr>
</table>
<br/>
<br/>
<br/>
<br/>
<table>
<tr>
<td>11</td>
<td>12</td>
<td>13</td>
<td>14</td>
<td>15</td>
<td>16</td>
</tr>
<tr>
<td>21</td>
<td>22</td>
<td>23</td>
<td>24</td>
<td>25</td>
<td>26</td>
</tr>
<tr>
<td>31</td>
<td>32</td>
<td>33</td>
<td>34</td>
<td>35</td>
<td>36</td>
</tr>
<tr>
<td>41</td>
<td>42</td>
<td>43</td>
<td>44</td>
<td>45</td>
<td>46</td>
</tr>
</table>
</body>
</html>