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>

 

 
效果图：

 

 

posted @ 2022-04-19 15:21  包歌  阅读(81)  评论(0)    收藏  举报