脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript技巧 → jquery 背景颜色

利用JQuery和JS实现奇偶行背景颜色自定义效果

 更新时间：2012年11月19日 15:27:05   作者：  
本文将详细介绍利用JQuery和JS实现奇偶行背景颜色自定义效果,需要的朋友可以参考下
JQuery实现:
复制代码 代码如下:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>New Web Project</title>
<script type="text/javascript" src="jquery-core/jquery-1.8.0.js"></script>
<script type="text/javascript">
$(function(){
//可以是:$('#t1 tbody tr:even').css('background','red');
$('#t1 > tbody tr:even').css('background','red');
$('#t1 > tbody tr:odd').css('background','blue');
});
</script>
</head>


<body>
<table id="t1" width="500px" align="center">
<tbody> 
<tr><td>aaaaaaa</td></tr>
<tr><td>bbbbbbb</td></tr>
<tr><td>ccccccc</td></tr>
<tr><td>ddddddd</td></tr>
<tr><td>eeeeeee</td></tr>
<tr><td>fffffff</td></tr>
<tr><td>ggggggg</td></tr>
<tr><td>hhhhhhh</td></tr>
</tbody>
</table>


</body>
</html>

JS实现：
复制代码 代码如下:

<span style="color:#333333;"><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>New Web Project</title>

<script type="text/javascript">
//页面加载事件
window.onload=function(){
//获取table
var tb1 = document.getElementById("t1");
//获取table中的tbody
var tbody = tb1.getElementsByTagName("tbody")[0];
//获取tr
var trs = tbody.getElementsByTagName("tr");
//根据奇、偶行显示不同的背景颜色
for(var i=0; i<trs.length;i++){
if(i%2==0){
trs[i].style.backgroundColor="red";
}else{
trs[i].style.backgroundColor="blue";
}
}
}
</script>
</head>

<body>
<table id="t1" width="500px" align="center">
<tbody>
<tr><td>aaaaaaa</td></tr>
<tr><td>bbbbbbb</td></tr>
<tr><td>ccccccc</td></tr>
<tr><td>ddddddd</td></tr>
<tr><td>eeeeeee</td></tr>
<tr><td>fffffff</td></tr>
<tr><td>ggggggg</td></tr>
<tr><td>hhhhhhh</td></tr>
</tbody>
</table>
</body>
</html>
您可能感兴趣的文章:

相关文章

  • 关于在Typescript中做错误处理的方式详解

    关于在Typescript中做错误处理的方式详解

    错误处理是软件工程重要的一部分,如果处理得当,它可以为你节省数小时的调试和故障排除时间,我发现了与错误处理相关的三大疑难杂症：TypeScript的错误类型,变量范围和嵌套,让我们逐一深入了解它们带来的挠头问题,感兴趣的朋友可以参考下
    2023-09-09
  • 使用JS实现jQuery的addClass, removeClass, hasClass函数功能

    使用JS实现jQuery的addClass, removeClass, hasClass函数功能

    这篇文章主要介绍了使用JS实现jQuery的addClass, removeClass, hasClass函数功能,需要的朋友可以参考下
    2014-10-10
  • JavaScript Reduce使用详解

    JavaScript Reduce使用详解

    这篇文章主要介绍了JavaScript Reduce使用的相关资料，帮助大家更好的理解和学习使用JavaScript，感兴趣的朋友可以了解下
    2021-03-03
  • JavaScript自定义超时API代码实例

    JavaScript自定义超时API代码实例

    这篇文章主要介绍了JavaScript自定义超时API代码实例,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
    2020-04-04
  • 微信小程序使用swiper组件实现层叠轮播图

    微信小程序使用swiper组件实现层叠轮播图

    这篇文章主要为大家详细介绍了微信小程序使用swiper组件实现层叠轮播图，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2018-11-11
  • 原生JS实现HTML转Markdown功能

    原生JS实现HTML转Markdown功能

    这篇文章主要为大家详细介绍了如何使用原生JS实现简单的HTML转Markdown功能,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一下
    2025-04-04
  • js添加事件的通用方法推荐

    js添加事件的通用方法推荐

    下面小编就为大家带来一篇js添加事件的通用方法推荐。小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2016-05-05
  • JS设置随机出现2个数字的实例代码

    JS设置随机出现2个数字的实例代码

    这篇文章给大家分享基于js设置随机出现2个数字的实例代码，在文章下面给分享js产生随机数的几个用法介绍，感兴趣的朋友一起看看吧
    2017-07-07
  • 深入解析ES6中的promise

    深入解析ES6中的promise

    ES6中的promise对象很早就听说过，据说是为了解决我们使用回调产生回调地狱的问题。今天小编就带领大家通过本文学习下es6中的promise，感兴趣的朋友跟随小编一起看看吧
    2018-11-11
  • Javascript前端UI框架Kit使用指南之kitjs事件管理

    Javascript前端UI框架Kit使用指南之kitjs事件管理

    本文详细介绍了Kitjs的事件管理功能，包括普通的Dom事件、Kit如何解决问题、代码解析、注销事件等。需要的朋友可以参考下。
    2014-11-11

最新评论