Javascript 輸出表格

輸出一個表格，奇偶行背景色不同，滑鼠移動行的背景色高亮。

 

這是一個很簡單的小樣本，這裡訓練一下JS的迴圈、分支、事件這幾個知識點。

1. 僅使用 while 迴圈控制輸出時，一般肯定會配置計數變數

2. 用模數來控制輸出格式

3. 輸出行時添加 onmouseover 和 onmouseout 事件，並傳參。

4. 這裡的參數 this 指向的就是事件來源（mouse 位於的 tr 這行）

<script>        

    var i = 0;

    var bg = null;

    var color = null;

    document.write('<table border="1" align="center" width="500">');

    while(i < 100){

        if(i % 10 == 0){

            if(i % 20 == 0)

                bg="#cccccc";

            else

                bg="#ffffff";                    

            document.write('<tr align="center" onmouseover="showBG(this)" onmouseout="unShowBG(this)" bgcolor="'+ bg +'">');                

        }

        document.write('<td>' + i + '</td>');

        i++;

        if(i % 10 == 0){

            document.write('</tr>');

        }            

    }

    document.write('</table>');            

    function showBG(obj){

        color = obj.bgColor;

        obj.bgColor = "orange";

    }

    function unShowBG(obj){

        obj.bgColor = color;

    }    

</script>