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>