jQuery遍历实现隔行变色

最新推荐文章于 2022-02-28 19:19:39 发布
最新推荐文章于 2022-02-28 19:19:39 发布
阅读量920 收藏
点赞数
分类专栏： 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 2826
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选取商品隔行变色
09-22
jquery选取商品隔行变色
jq遍历及隔行变色
melody875649004的博客
08-27 550
  $(function () {         $("#chose tr:even").css("backgroundColor", "red");         $("#chose tr:odd").css("backgroundColor", "blue");//隔行变色})     });         $("#chk").get(0).onclick =
jQuery选择器实现隔行变色和使用javaScript实现隔行变色
weixin_34410662的博客
06-24 238
&lt;html xmlns="http://www.w3.org/1999/xhtml"&gt; &lt;head&gt; &lt;!--什么是选择器？ jQuery选择器继承了CSS与Path语言的部分语法，允许通过标签名、属性名或内容对DOM元素进行快速、准确的选择，而不必担心浏览器的兼容性，通过jQuery选择器对页面元素的精准定位，才能完成元素性和行为的处理。 选择器的优势？ 与传统的...
jQuery实现简单隔行变色的方法
10-22
关于使用jQuery实现表格中隔行变色效果的详细知识点主要涉及以下几个方面： 1. jQuery的基础知识：首先需要了解jQuery是一个快速、小巧且功能丰富的JavaScript库，它通过简化HTML文档遍历、事件处理、动画和Ajax...
jQuery实现的隔行变色功能【案例】
10-17
在描述中提到的“结合具体实例形式分析了jQuery事件响应、元素遍历及属性动态操作相关使用技巧”，意味着案例中不仅展示了隔行变色的实现，还进一步通过实例讲解了如何利用jQuery进行事件的绑定和响应、如何遍历元素...
jQuery插件实现表格隔行变色及鼠标滑过高亮显示效果代码
10-22
在这个例子中，我们将深入探讨如何使用jQuery创建一个插件，以实现表格隔行变色以及鼠标滑过时的高亮显示效果。 首先，我们来看一下基本的HTML结构，这里包含了一个简单的表格，用于展示插件的效果： ```html ...
JS与jQuery实现隔行变色的方法
10-21
总之，JavaScript和jQuery都能有效地实现隔行变色，但jQuery的简洁性和易用性使其在大多数情况下成为首选。同时，开发者应当根据项目需求和团队习惯选择最合适的实现方式，并注意保持代码的可维护性和可扩展性。
jquery 实现隔行变色
Mike_8859的博客
11-08 507
//效果图 //代码 $(function(){ $("tr:odd").attr("bgColor","#DD1C73"); $("tr:even").attr("bgColor","#875BE6"); })                              11111               22222  
mmGrid：mmGird是一个基于jQuery的表格控件
02-19
文档和示例参见
jquery实现隔行换色效果
11-17
jquery实现隔行换色效果
jQuery中的几个案例：隔行变色、复选框全选和全不选
devlgdg1924的博客
05-02 214
1 表格隔行变色 1 技术分析： 1 ）基本过滤选择器： odd: even: 2 ）jq添加和移除样式： addClass(); ...
jquery实现隔行变色
小宁博客
06-05 2400
原文链接：小宁博客 描述：通过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 3093
点按钮换色 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style> .changeRed{ background-color:red; } </style> </head> <body> <ul> <li &gt
通过节点操作，实现隔行变色效果
Scrow1204的博客
11-04 843
要点： 1.通过.childNodes获取的节点，有标签、文本（包括空文本）、和属性都要算在内。我们要的只是元素类型为标签，通过nodeType判断元素的类型，标签返回值是1，属性返回的是2，文本返回的是3 2.通过nodeName返回的节点名字，如果是标签节点，返回标签类型的大写名字如LI（&lt;li&gt;），如果是属性节点返回的是属性的小写，文本节点返回#text 3.通过nodeV...
利用jQuery实现给div循环上色
asiangames的专栏
06-10 1062
具体代码如下：  $(function(){           var colors = ["color1", "color2", "color3", "color4", "color5"];           var containers = $('.container');           for(var i= 0, j=0; i               if(j==co
jquery中.each()遍历元素遇到的问题
认真做事，开心生活
04-04 3586
今天开发中遇到一个问题，我要遍历以下li元素： <divid="viewpage"class="list"> <ul> <liclass="p6"><ahref="#"><imgclass="viewpage"src="http://appimg.pba.cn/2019/04/04/d86169488bb...
JavaScript与jQuery实现表格隔行变色与Tab标签页特效
"JavaScript表格隔行变色和Tab标签页特效的示例，包括原生JavaScript和jQuery的实现方法，旨在介绍JavaScript元素遍历、事件响应以及提高代码效率的jQuery库应用。" 在Web开发中，为了提升用户体验，经常会使用一些...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值