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

游离的多态
  • 10

题目描述

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

题目来源及自己的思路

来自于老师,我的思路是通过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>

你期待的结果是什么?实际看到的错误信息又是什么?

我期待获取tr的数组
错误信息是:获取的数组始终为空数组

回复
阅读 820
1 个回答

你生成tr是在获取元素之后了,改变一下顺序
tbody.innerHTML = str;
var res = document.querySelectorAll('tbody>tr');
console.log(res);

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
宣传栏