js实现表格隔行换色
作者：互联网
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<style>
*{
padding: 0;
margin: 0;
}
table{
margin: 50px auto;
}
</style>
<body>
<table border=1 width="500">
<thead>
<tr>
<th>序号</th>
<th>姓名</th>
<th>年龄</th>
<th>性别</th>
<th>成名绝技</th>
</tr>
</thead>
</table>
</body>
<script>
var arr = [
{
name:"令狐冲",
age:20,
sex:"男",
skill:"独孤九剑"
},
{
name:"东方不败",
age:30,
sex:"女",
skill:"葵花宝典"
},
{
name:"任我行",
age:80,
sex:"男",
skill:"吸星大法"
},
{
name:"乔峰",
age:30,
sex:"男",
skill:"降龙十八掌"
},
{
name:"张无忌",
age:25,
sex:"男",
skill:"九阳神功"
},
{
name:"段誉",
age:22,
sex:"男",
skill:"六脉神剑"
}
];
var tbody = document.createElement('tbody');
var table = document.querySelector('table');
table.appendChild(tbody);
var str = ''
arr.forEach(function(v,i){
if(i%2){
str += '<tr bgColor="skyblue">'
}else{
str += '<tr bgColor="pink">'
}
str += '<td>'+(i+1)+'</td>' for(var key in v) { str += '<td>'+v[key]+'</td>' } str += '</tr>' }) tbody.innerHTML = str </script> </html> 效果图：
str += '<td>'+(i+1)+'</td>' for(var key in v) { str += '<td>'+v[key]+'</td>' } str += '</tr>' }) tbody.innerHTML = str </script> </html> 效果图：
标签：换色,age,sex,隔行,str,var,skill,js,name 来源： https://www.cnblogs.com/bg618/p/16165460.html