原生js解决表格奇偶列显示

最新推荐文章于 2023-01-31 09:21:16 发布

ChyoD1811

最新推荐文章于 2023-01-31 09:21:16 发布

阅读量409

点赞数

分类专栏： JavaScript 文章标签： js ie8 css3 table-td

本文链接：https://blog.youkuaiyun.com/ChyoD1811/article/details/103995289

版权

本文介绍了如何利用JavaScript解决在表格中实现奇偶列显示不同颜色的问题，特别是在IE8环境下，替代不兼容CSS3的选择器。通过操作table的rows和row的cells属性，可以达到奇数列内容靠右、偶数列内容靠左的效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

本方案重点在于掌握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>
	&l

最低0.47元/天解锁文章