（27）表格隔行变色

来源：互联网发布：淘宝买家虚假交易编辑：程序博客网时间：2024/04/29 04:58

表格隔行变色的基本思想是：遍历每一行，采用取模的方式让遍历常量i%2，设置能被2完全模尽的行的背景颜色 background，然后设置不能被2模尽的行的背景颜色即可。

<!DOCTYPE HTML><html><head><meta charset="utf-8"><title></title><script>window.onload=function (){var oTab=document.getElementById('tab1');for(var i=0;i<oTab.tBodies[0].rows.length;i++)//oTab.tBodies[0].rows.length表示tBodies中有几行{if(i%2){oTab.tBodies[0].rows[i].style.background="#CCC";}else{oTab.tBodies[0].rows[i].style.background="";}}}; </script></head><body><table id="tab1" border="1" width="500"><thead><td>ID</td><td>姓名</td><td>年龄</td></thead><tbody><tr><td>1</td><td>Xuan</td><td>23</td></tr><tr><td>2</td><td>XXX</td><td>25</td></tr><tr><td>3</td><td>SSS</td><td>24</td></tr><tr><td>4</td><td>李四</td><td>26</td></tr><tr><td>5</td><td>王五</td><td>29</td></tr></tbody></table></body></html>

效果图：

0 0