原生javascript实现隔行换色

 更新时间:2015年01月04日 10:11:18   投稿:hebedich  
这篇文章主要介绍了原生javascript实现隔行换色,需要的朋友可以参考下

js让我们一起从基础来学习,我们一点一点的来学习

下边是我写的代码,然后大家看着学习下吧!!!

复制代码 代码如下:

<html>
<head>
<title>js演示</title>
</head>
<body>
<script>
document.write('<table border="1" width="100px" align="center">');
var i=0;
while(i<100){
if(i%10==0){
if(i%20==0)
bg="#cccccc";
else
bg="#ffffff";
document.write('<tr onmouseover="show(this)" onmouseout="onshow(this)" bgcolor="'+bg+'">');
}
document.write('<td>'+i+'</td>');
i++;
if(i%10==0){
document.write("<tr>");
}
}
document.write("</table>")
var ys=null;
function show(obj){
ys=obj.bgColor;
obj.bgColor="red";
}
function onshow(obj){
obj.bgColor=ys;
}
</script>
</body>
</html>

功能很简单,却非常实用,小伙伴们参考下吧。

相关文章

  • TypeScript联合类型,交叉类型和类型保护

    TypeScript联合类型,交叉类型和类型保护

    这篇文章主要介绍了TypeScript联合类型,交叉类型和类型保护,联合类型就是定义一些类型,定义的变量只需要满足任意一种类型即可,交叉类型就是需要满足所有类型,交叉类型使用,更多内容我们来看看下面文章详细内容吧
    2021-12-12
  • showModelessDialog()使用详解

    showModelessDialog()使用详解

    showModelessDialog()使用详解...
    2006-09-09
  • Bootstrap table 定制提示语的加载过程

    Bootstrap table 定制提示语的加载过程

    bootstrap-table是在bootstrap-table的基础上写出来的,专门用于显示数据的表格插件。这篇文章主要介绍了Bootstrap table 定制提示语,需要的朋友可以参考下
    2017-02-02
  • Firefox/Chrome/Safari的中可直接使用$/$$函数进行调试

    Firefox/Chrome/Safari的中可直接使用$/$$函数进行调试

    偶然发现的,页面中没有引入Prototype和jQuery。控制台中敲$却发现是一个函数。又试着敲$$,也是个function
    2012-02-02
  • vue3 uniapp微信登录功能实现

    vue3 uniapp微信登录功能实现

    根据最新的微信小程序官方的规定,uniapp中的uni.getUserInfo方法不再返回用户头像和昵称、以及手机号,这篇文章主要介绍了vue3 uniapp微信登录功能实现,需要的朋友可以参考下
    2024-04-04
  • 微信小程序功能之全屏滚动效果的实现代码

    微信小程序功能之全屏滚动效果的实现代码

    最近小编做项目遇到这样的需求,要求实现一个全屏滚动的效果,在网上找了实例代码,但是不是很完美,小编又结合自己的知识给大家补充下,对微信小程序全屏滚动效果的实例代码感兴趣的朋友参考下本文吧
    2018-11-11
  • JavaScript数据结构之二叉树的遍历算法示例

    JavaScript数据结构之二叉树的遍历算法示例

    这篇文章主要介绍了JavaScript数据结构之二叉树的遍历算法,简单介绍了javascript实现数据结构中二叉树的中序遍历、先序遍历及后序遍历方法与相关使用技巧,需要的朋友可以参考下
    2017-04-04
  • bootstrap PrintThis打印插件使用详解

    bootstrap PrintThis打印插件使用详解

    这篇文章主要为大家详细介绍了bootstrap PrintThis打印插件的使用方法,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-02-02
  • JavaScript中的isXX系列是否继续使用的分析

    JavaScript中的isXX系列是否继续使用的分析

    我们很容易被漂亮的代码吸引,也不知不觉的在自己的代码库中加入这些。却没有冷静的想过它们的优劣。这不,我就收集了一系列形如 “是否为……?” 的判断的boolean函数。
    2011-04-04
  • 一个简单的JavaScript数据缓存系统实现代码

    一个简单的JavaScript数据缓存系统实现代码

    数据缓存系统,主要是将一些可复用的数据临时存放一下,放下数据后面的再次调用。
    2010-10-10

最新评论