JS realizes the interlaced color-------Day40

So started their own second project, the performance appraisal system, a project team, the first to start, but also this painful interface design, can not change the existing template, only on the existing basis to play, my poor aesthetic in this small space suddenly so helpless, okay, There are always some places still need to add some effect, like this interlaced color, not very practical.

Table in this div+css raging era some decline, but encountered multiple columns of data display, it still has incomparable convenience, we first write down a

<table id= "TB" width= "900px;" border= "1" >    <tbody>    <tr>    <td>213</td>    <td>234</td>    </tr>    <tr>    <td>213</td>    <td>234 </td>    </tr>    <tr>    <td>213</td>    <td>234</td>    </tr>    <tr>    <td>213</td>    <td>234</td>    </tr>    <tr>    <td>213</td>    <td>234</td>    </tr>    </tbody>    </table>

so let's take a look at the effect and add border here to make it easier to see

And then we're going to make the interlaced color by JavaScript.

<script type= "Text/javascript" >window.onload=function () {var Tb=document.getelementbyid ("TB");// Gets the Table object var tbody=tb.getelementsbytagname ("Tbody") [0];//gets the tbody part of the table Var trs=tbody.getelementsbytagname ("tr ");//gets all the rows for the Tbody section for (Var i=0;i<trs.length;i++) {if (i%2==0) {//judgment can be divisible by 2, i.e. the color of even lines is gray trs[i].style.background=" # CCC ";//The corresponding line, the object's style setting}}};</script>

Let's take a look at the effect here.

In this way, a beautiful interlaced color is realized, this seemingly interview problem often appears, after all, is a relatively basic thing, but I now learn, ah, sin sin ....

Every moment is new, come on