隔行变色

JS基础 黄飞鹏
文章标签: children 循环

直接上题目:

31d25c39c6733ab40fd54bf6f23b301.jpg

这里考察的是我们的children和循环下面我们直接上代码;

color.png

首先我们先写一个样式背景颜色为红色(这里的class名字是我们后面命名的名字);

下面是JavaScript代码;

代码.png

1、首先我们通过表格的Id获取到这个对象;

2、通过children[0]标获取到table下面的第一个标签;这里有个坑,很多出学者(比如说我第一次学的时候直接就写成table.children,table下面的子元素就是tr这样写没错啊,非也弟弟)入坑,下面我们直接看代码:f13ef743aac9d2f71d3dde3e461ef9a.png 我们直接打印我们刚刚说的代码,结果是:20834d44e567d76c3e02a4f27914efb.png

发现table和tr中间居然有一个没有在HTML里面显示的标签叫做<tbody></tbody>(这是一个隐藏标签)所以我们要children[0].children才能获取到tr

3、写到这里就很简单了 children输出的是一个数组,我们直接.length获取到数组的长度遍历即可;

4、这是偶数行变色所有我们给一个if判断直接%2=0即可;

5、我们将%2等于o的tr通过className全部命名为.color(就是我们代码开头的style样式);

6、下面是效果图:

ef631f97493d0ac24e4a8aee2bef0b7.png

总结:首先我们要找到对象tr 然后用children输出,children输出的是一个数组 我们可以通过遍历就可以直接弄出我们想要的效果;

还能输出{{restrictNumber}}个字符  
  • {{reply.author}}

    {{CommonUtil.formateDate(reply.ac_CommentDate).shortTime}}
  • 回复了{{Comments.author}} :