图片 1

Jquery实现表格隔行变色的效果

正文实例叙述了JavaScript实现表格火速变色效果的秘诀。分享给大家供大家仿照效法。具体如下:

报表隔行变色效果是一种非常广泛的效劳,以前用javascript达成起来倍感还挺复杂的,近日透过jquery只必要一句代码就OK了,真的很刚劲,上边就来看看具体哪些选取jquery完结表格隔行变色的意义啊。

此处运用JavaScript实现叁个极酷的表格特效,表格火速的变脸,产生色彩炫彩的功用,第一随即上去,以致不疑似表格。读者能够经过本代码来商量一下Js的连带个性,了然部分JS编制程序手艺。

隔行变色效果图如下:

运作效果截图如下:

图片 1

在线演示地址如下:

Jquery完结表格隔行变色的功用的现实示例代码如下:

现实代码如下:

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>www.phpernote.com</title>
</head>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.2.min.js"> </script>
<script language="javascript">
$(document).ready(function(){
 $('table tr:nth-child(odd)').addClass('edit');
});
</script>
<style type="text/css">
.edit{background-color:#a5e5aa;}
</style>
<body>
<table border="1">
    <tr>
     <td>1</td>
     <td>php程序员的笔记</td> 
    </tr>
    <tr>
     <td>2</td>
     <td>php教程网</td>   
    </tr>
    <tr>
     <td>3</td>
     <td>http://www.phpernote.com</td> 
    </tr>
    <tr>
     <td>4</td>
     <td>php程序员的笔记,php教程</td> 
    </tr>
    <tr>
     <td>5</td>
     <td>靠谱的php程序员网站</td> 
    </tr>
</table>
</body>
</html>
HTMLHEADTITLE变色表格/TITLEMETA content="text/html; charset=utf-8" (0,1,2,3,4,5,6,7,8,9,'a','b','b','c','d','e','f');function f(y){ for(i=5;i117;i++) { c=(i+y)%30; if(c15) c=30-c; eval("document.all[i].bgColor='00"+l[c]+l[c]+"00'"); } y++; setTimeout('f('+y+')','1');}function p(x){ document.write("td /td"); x++; if((x%10==1)&&(x%100!=1)) document.write("/trtr"); if(x101) p(x); else { document.write("/tr"); f(1); }}document.write("body bgcolor=0table width=300 height=300 border=0 cellpadding=0 cellspacing=0tr");p(1);/script/body/HTML

你恐怕感兴趣的小说

  • Jquery等待ajax实施实现再继续实施下边代码的坚守
  • js获取表格的行数和列数(宽容IE和firefox)
  • JavaScript获得表格(table)的行数和列数
  • smarty循环表格并补充表格td不足的意况
  • Jquery屏蔽鼠标右键的不二等秘书技
  • jquery下拉菜单效果(超简洁实用,宽容IE和firefox等主流浏览器)
  • Jquery动漫效果简单总计
  • 网页缓存Js,css以致图片导致页面刷新无效果与利益的三种消除办法

梦想本文所述对大家的javascript程序设计有所扶助。

发表评论

电子邮件地址不会被公开。 必填项已用*标注