原生js解决奇偶列问题-进阶版

核心对象: document , parentObj, table ,td

核心API: document .getElementById , parentObj.getElementsByTagName , table.rows , row.cells , td.align

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>测试表格奇偶列, IE8替代伪类选择器</title>
	<script type="text/javascript">
	window.onload = function(){
		
		var table_div = document.getElementById("aa1");
		var tables = table_div.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++) {
						// cells[k].style.border = '1px solid red';
						cells[k].style.width = '100px';
							if( (k & 1 ) === 0){//奇数
								cells[k].align = 'right';	
							}else{
								cells[k].align = 'left';	
							}
						}	
				}
		}
	}
</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/>
	<div id="aa1">
		<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>
	</div>
</body>
</html>

ChyoD1811

发布了22 篇原创文章 · 获赞 3 · 访问量 3442

私信关注

原生js解决奇偶列问题-进阶版

猜你喜欢