版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
<!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>