jQuery遍历实现隔行变色

最新推荐文章于 2022-02-28 19:19:39 发布
最新推荐文章于 2022-02-28 19:19:39 发布
阅读量929 收藏
点赞数
分类专栏： js ajax
js 同时被 2 个专栏收录
60 篇文章 0 订阅
订阅专栏
ajax
26 篇文章 0 订阅
订阅专栏
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>给网页中的元素添加onclick事件</title>
<script type="text/javascript" language="javascript" src="../jquery-1.7.1.min.js"></script>
<script type="text/javascript" language="javascript">
$(document).ready(function(){
var oldcolor;
$("tr").each(function(index,eleMe){
if(index%2==0){
$(this).css("background-color","#ffff99");
}else{
$(this).css("background-color","#cccccc");
}
}).hover(

function(){
//获取原有颜色
oldcolor=$(this).css("background-color");
newcolor=$(this).css("background-color","green")
},function(){
$(this).css("background-color",oldcolor);
});

});


</script>
</head>
<body>
<table width="300" border="1">
  <tr>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
  </tr>
  <tr>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
  </tr>
  <tr>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
  </tr>
  <tr>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
  </tr>
  <tr>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
  </tr>
  <tr>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
  </tr>
  <tr>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
  </tr>
  <tr>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
  </tr>
</table>
</body>
</html>
jaray
关注
专栏目录
利用for循环实现的隔行变色
suxiaxuhuanhuan的专栏
02-27 2849
http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> http://www.w3.org/1999/xhtml"> 无标题文档   function get(){  for(var i=1;i   if(i%2!=0){   //给表格的背景加颜色      document.getElementById("d
jQuery实现简单隔行变色的方法
10-22
关于使用jQuery实现表格中隔行变色效果的详细知识点主要涉及以下几个方面： 1. jQuery的基础知识：首先需要了解jQuery是一个快速、小巧且功能丰富的JavaScript库，它通过简化HTML文档遍历、事件处理、动画和Ajax...
jquery选取商品隔行变色
09-22
jquery选取商品隔行变色
jq遍历及隔行变色
melody875649004的博客
08-27 561
  $(function () {         $("#chose tr:even").css("backgroundColor", "red");         $("#chose tr:odd").css("backgroundColor", "blue");//隔行变色})     });         $("#chk").get(0).onclick =
jQuery选择器实现隔行变色和使用javaScript实现隔行变色
weixin_34410662的博客
06-24 248
&lt;html xmlns="http://www.w3.org/1999/xhtml"&gt; &lt;head&gt; &lt;!--什么是选择器？ jQuery选择器继承了CSS与Path语言的部分语法，允许通过标签名、属性名或内容对DOM元素进行快速、准确的选择，而不必担心浏览器的兼容性，通过jQuery选择器对页面元素的精准定位，才能完成元素性和行为的处理。 选择器的优势？ 与传统的...
jQuery实现的隔行变色功能【案例】
10-17
在描述中提到的“结合具体实例形式分析了jQuery事件响应、元素遍历及属性动态操作相关使用技巧”，意味着案例中不仅展示了隔行变色的实现，还进一步通过实例讲解了如何利用jQuery进行事件的绑定和响应、如何遍历元素...
jQuery插件实现表格隔行变色及鼠标滑过高亮显示效果代码
10-22
在这个例子中，我们将深入探讨如何使用jQuery创建一个插件，以实现表格隔行变色以及鼠标滑过时的高亮显示效果。 首先，我们来看一下基本的HTML结构，这里包含了一个简单的表格，用于展示插件的效果： ```html ...
JS与jQuery实现隔行变色的方法
10-21
总之，JavaScript和jQuery都能有效地实现隔行变色，但jQuery的简洁性和易用性使其在大多数情况下成为首选。同时，开发者应当根据项目需求和团队习惯选择最合适的实现方式，并注意保持代码的可维护性和可扩展性。
jquery 实现隔行变色
Mike_8859的博客
11-08 517
//效果图 //代码 $(function(){ $("tr:odd").attr("bgColor","#DD1C73"); $("tr:even").attr("bgColor","#875BE6"); })                              11111               22222  
mmGrid：mmGird是一个基于jQuery的表格控件
02-19
文档和示例参见
jQuery中的几个案例：隔行变色、复选框全选和全不选
devlgdg1924的博客
05-02 217
1 表格隔行变色 1 技术分析： 1 ）基本过滤选择器： odd: even: 2 ）jq添加和移除样式： addClass(); ...
jquery实现隔行变色
小宁博客
06-05 2412
原文链接：小宁博客 描述：通过jQuery控制表格的奇数行和偶数行的颜色不一样，鼠标经过的时候，颜色变成白色，鼠标离开，颜色恢复原来的颜色。jQuery的版本为1.8 示例代码： &lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&am
jquery实现点击按钮循环变色功能的3种方式
just_learing的博客
02-28 3125
点按钮换色 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style> .changeRed{ background-color:red; } </style> </head> <body> <ul> <li &gt
mmGrid基于jQuery的表格样式数据处理插件
lzh578903779的博客
05-15 3387
mmGrid 是 jQuery 实现对表格的样式库的插件。支持包括排序、Ajax、宽度锁定、列隐藏、锁定、nowrap、多选、选择和分页等功能，还可以配合Bootstrap使用，效果更加好看华丽。mmGrid简介 这是一个基于jQuery的表格部件。它提供了几个基本的功能，可以用于面积有限却要显示较多数据的页面。 它的样式表很简单，修改起来非常容易，你可以很快的给它更换一个样式融入到你的页面中。
利用jQuery实现给div循环上色
asiangames的专栏
06-10 1070
具体代码如下：  $(function(){           var colors = ["color1", "color2", "color3", "color4", "color5"];           var containers = $('.container');           for(var i= 0, j=0; i               if(j==co
jq 个性的隔行变色
weixin_30708329的博客
02-21 104
效果图大致这样： 我的html格式部分这样：/*不过他们都说我的dom结构不太合理，同意。BUT，我就是不想写表格而写成的这样的，所以后面jq部分也要迁就了*/ <div class="pro_detail"> <!-- 列表详细信息 --> <ul...
球员信息的操作
BoBrother的博客
10-23 418
.left{ float: left; } .right{ float: right; } .even{ background-color: blue; } .odd{ background-color: red; } .first{ background-color: yellow; } .f{ background-color: pink; } .d{ b
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值