js案例——取模给表格行添加渐变背景色

资本理念

于 2019-10-18 20:07:21 发布

阅读量285

点赞数 1

分类专栏： web前端笔记总结

本文链接：https://blog.csdn.net/qq_43151638/article/details/102631254

版权

web前端笔记总结专栏收录该内容

78 篇文章 1 订阅

订阅专栏

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title></title>
</head>
<body>
	<table border="1" cellspacing="0" cellpadding="0" style="width: 600px;">
		<thead>
			<tr>
				<td>序号</td>
				<td>商品名称</td>
				<td>商品价格</td>
				<td>商品数量</td>
			</tr>
		</thead>
		<tbody class="tbody">
		</tbody>
	</table>
	
	<script type="text/javascript">
		
		var tbodys = document.querySelector('.tbody');
		var str = '';
		var arr = ['pink','skyblue','grey'];			
		for(var i=1;i<21;i++){
			// 打印循环时,取值变化
			console.log(i,i%arr.length,arr[i%arr.length]);
			// 通过取模变幻取值
			console.log(arr[i%arr.length]);
			//循环输出字符串
			str += '<tr style="background:'+arr[i%arr.length]+';">'+
						'<td>'+(i>9?i:'0'+i)+'</td>'+
						'<td>饼干</td>'+
						'<td>5.0</td>'+
						'<td>1</td>'+
					'</tr>';
		}
		// 将字符串插入标签中
		tbodys.innerHTML = str;
		
		//console.log(str);
		
	</script>
</body>
</html>