隔行换色

<style>

 tr{text-align: center;}

   eve{background-color: greenyellow;}

        .old{background-color: crimson;}

</style>

  <table border="1px solid red;" cellspacing="" cellpadding="" id="tab" style="width: 500px;height:auto;">

 <thead >

<tr style="background: red;">

 <th>姓名:</th>

 <th>年龄:</th>

 <th>性别:</th>

 </tr>

 <tbody>

 <tr>

 <td>哈哈</td><td>16</td><td>男</td>

 <td>呵呵</td><td>17</td><td>女</td>

 <td>嘻嘻</td><td>18</td><td>男</td>

 <td>啦啦</td><td>19</td><td>女</td>

 <td>哒哒</td><td>20</td><td>男</td>

 <td>痴痴</td><td>21</td><td>女</td>

 </tbody>

 </thead>

    </table>

js部分:

<script type="text/javascript">

    /*通过id获取获取表单元素*/

    var tab=document.getelementbyid("tab");

    /*返回集合类型*/

    var tabody=tab.getelementsbytagname("tbody")[0];

    /*获取【tabody】下的【tr】集合*/

    var trs=tabody.getelementsbytagname("tr");

    for(var i=0;i<trs.length;i++){

【第一种方法】:

    /*if(i%2){

    trs[i].classname="eve";

    }else{

    trs[i].classname="old";

    }*/

【第二种方法】:

    /*三位运算符写法*/

    trs[i].classname=(i%2==0)?"eve":"old";

    </script>