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

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

ChyoD1811

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

阅读量350

点赞数

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

本文链接：https://blog.csdn.net/ChyoD1811/article/details/103995289

版权

本方案重点在于掌握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元/天解锁文章

ChyoD1811

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
原生js解决表格奇偶列显示

本方案重点在于掌握table的 rows属性和 row的cells属性.解决的问题: 例子: 奇偶列不同颜色显示个人实际运用: 表格内部内容我想要让内容相对靠近, 奇数列靠右,偶数列靠左, 用以替换IE8不兼容的CSS3伪类选择器<!DOCTYPE html><html><head> <meta charset="utf-...
复制链接

扫一扫