怎么获取这种情况系的表格tr

Question

怎么获取这种情况系的表格tr

游离的多态

101513

发布于
2019-11-09

题目描述

完成创建动态表格，且表格隔行换色

题目来源及自己的思路

来自于老师，我的思路是通过foreach创建动态表格，再通过querySelectorAll获取tr组成的数组，根据数组索引，进行变色

相关代码

// 请把代码文本粘贴到下方（请勿用图片代替代码）

<!DOCTYPE html>
<html lang="en">

<head>

<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>

</head>

<body>

<table>
    <thead>
        <tr>
            <td>姓名</td>
            <td>年龄</td>
            <td>性别</td>
        </tr>
    </thead>
    <tbody>
    </tbody>
</table>
<script type="text/javascript">
    var arr = [{
        name: 'Jack',
        age: 18,
        gender: '男'
    }, {
        name: 'Rose',
        age: 20,
        gender: '女'
    }, {
        name: 'Tom',
        age: 22,
        gender: '男'
    }, {
        name: '郭翔',
        age: 18,
        gender: '男'
    }]
    var tbody = document.querySelector('tbody')
    var str = ''
    arr.forEach(function(item) {
        str += '<tr><td>' + item.name + '</td><td>' + item.age + '</td><td>' + item.gender + '</td></tr>'
    })
    var res = document.querySelectorAll('tbody>tr');
    console.log(res);
    tbody.innerHTML = str;
</script>

</body>

</html>