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>