隔行变色【js及JQuery】

最新推荐文章于 2023-03-18 19:22:16 发布
最新推荐文章于 2023-03-18 19:22:16 发布
阅读量494 收藏
点赞数
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/qiyihan0911/article/details/8815574
本博客展示了如何使用jQuery为HTML表格中的偶数行设置背景颜色，并通过JavaScript实现功能，同时提供了详细的代码示例和运行效果。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

<head>
    <title></title>

    <script src="jquery-1.9.1.js" type="text/javascript"></script>
   <script type="text/javascript">
         $(function () {
         $('tr:even:not(#tr1)').css('background-color','blue');//选择所有偶数行，但不包括第一行【标题行】
     })

//     function upcolor() {
//         var trs = document.getElementByTagNmae('tr');
//         alert(trs.length);
//     }
   </script>
</head>
<body onload="upcolor()">
 <table>
        <tr id="tr1">
            <th>
                出游时间
            </th>
            <th>
                出游地
            </th>
            <th>
                出游方式
            </th>
            <th>
                预计花费
            </th>
        </tr>
        <tr>
            <td>
                元旦
            </td>
            <td>
                三亚
            </td>
            <td>
                飞机
            </td>
            <td>
                2000
            </td>
        </tr>
        <tr>
            <td>
                春节
            </td>
            <td>
                泰国
            </td>
            <td>
                飞机
            </td>
            <td>
                2500
            </td>
        </tr>
        <tr>
            <td>
                清明
            </td>
            <td>
                大唐芙蓉园
            </td>
            <td>
                火车
            </td>
            <td>
                1500
            </td>
        </tr>
        <tr>
            <td>
                五一
            </td>
            <td>
                颐和园
            </td>
            <td>
                火车
            </td>
            <td>
                100
            </td>
        </tr>
        <tr>
            <td>
                端午
            </td>
            <td>
                周庄
            </td>
            <td>
                火车
            </td>
            <td>
                1000
            </td>
        </tr>
        <tr>
            <td>
                十一
            </td>
            <td>
                满城
            </td>
            <td>
                汽车
            </td>
            <td>
                30
            </td>
        </tr>
    </table>
</body>
</html>

效果图如下：

赶快来试试吧

qiyihan0911
关注
使用jQuery实现表格的隔行变色
HackMasterX的博客
10-03 669
隔行变色是Web开发中常见的需求之一，通过给表格的奇偶行添加不同的背景色，可以增加表格的可读性和美观性。在本文中，我们将介绍如何使用jQuery来实现这个功能。接下来，我们需要给目标表格的奇偶行添加不同的背景色。我们可以使用jQuery的选择器和遍历方法来实现这个功能。首先，我们需要在页面中引入jQuery库。你可以将以上代码复制到你的HTML文件中，并根据需要修改选择器和颜色值来适应你的具体情况。在迭代的过程中，根据行的奇偶性使用。选择器选中了表格中的所有行，并使用。在上面的代码中，我们使用了。
JS之隔行变色
小书包的博客
01-09 963
JS之隔行变色 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>隔行变色</title> </head> <style> * { margin: 0px; padding: 0px; } di...
使用原生js和jQuery实现表格的隔行变色
JUN_WEB_YANG的博客
10-26 1436
原生js实现表格隔行变色：利用原生js操作DOM元素 HTML：<!DOCTYPE HTML> <html> <head> <title>1. 使用节点树方式实现表格偶数行变色</title> <meta charset="utf-8" /> <link rel="stylesheet" href="css/3.css" /> <!--引入jQuery文件--> <script src="./js
使用jQuery实现隔行变色
liu_111111的专栏
04-18 1254
jQuery选择器继承了CSS与Path语言的部分语法，允许通过标签名、属性名或内容对DOM元素进行快速、准确的选择，而不必担心浏览器的兼容性，通过jQuery选择器对页面元素的精准定位，才能完成元素性和行为的处理。 选择器的优势？ 与传统的JavaScript获取页面元素和便携食物相比，jQuery选择器具有明显的优势，具体表现在一下两个方面： *代码更简单 *完善的检测机制 -->
JS 隔行变色
网络剑客
02-27 961
window.onload=function(){ var oUl=document.getElementById('ul1'); var aLi=oUl.getElementsByTagName('li'); for(var i=0; i< aLi .length; i++) { if(i%2==0) //取模 求余数
JS表格各行变色
weixin_30856725的博客
03-18 174
<head> <title></title> <script type="text/javascript"> onload = function () { document.getElementById('btn').onclick = function () { ...
js隔行变色
qq_40052011的博客
04-15 174
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <style> .box { width: 300px; } ...
jquery选取商品隔行变色
09-22
"jQuery选取商品隔行变色"是一个常见的网页交互功能，主要用于电商网站的商品列表展示，使得用户在浏览长列表时能更清晰地区分各个项目。下面将详细解释如何使用jQuery实现这一功能。 首先，我们需要理解jQuery库的...
JS与jQuery实现隔行变色的方法
10-21
总之，JavaScript和jQuery都能有效地实现隔行变色，但jQuery的简洁性和易用性使其在大多数情况下成为首选。同时，开发者应当根据项目需求和团队习惯选择最合适的实现方式，并注意保持代码的可维护性和可扩展性。
jQuery插件实现表格隔行变色及鼠标滑过高亮显示效果代码
10-22
在这个例子中，我们将深入探讨如何使用jQuery创建一个插件，以实现表格隔行变色以及鼠标滑过时的高亮显示效果。 首先，我们来看一下基本的HTML结构，这里包含了一个简单的表格，用于展示插件的效果： ```html ...
简单实现jquery隔行变色
10-19
在前端开发过程中，使用jQuery来实现隔行变色效果是一种常见的需求，能够帮助改善用户界面的可读性，使得表格、列表等元素的展示更加人性化。本文将详细介绍如何通过jQuery实现隔行变色的几种方法，并提供具体实例...
js实现隔行变色操作鼠标经过效果
03-24
NULL 博文链接：https://yuxingxing1988.iteye.com/blog/1099511
JS实现隔行变色
kumayato的博客
05-11 519
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <style> .box { width: 300px; } li { line-height: 30px;
js 实现隔行变色
WDS的博客
03-26 1260
隔行变色
JS 隔行换色
温柔归故里
03-18 669
JS 隔行换色
js实现隔行换色
taokai的专栏
01-22 1427
http://www.w3.org/TR/html4/strict.dtd">     js实现隔行换色---阿会楠练习作品（为我所写，非我所想）     window.onload = function(){    var tr_ = document.getElementById("myTable").getElementsByTagName("tr");    for(var i = 0;i
原生 js 监测 某个 DOM进入 可视区
呆呆狗
07-16 668
就是 这个 IntersectionObserver 对象， MDN 中有介绍， vue3 版本的 vueuse/core 其实也是根据这个封装的 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="vie.
使用jQuery实现商品列表隔行变色效果
标题中提及的“jquery选取商品隔行变色”和描述中的“jquery选取商品隔行变色”指向同一个知识点，即使用jQuery这个JavaScript库来实现网页中商品列表项隔行变色的效果。jQuery是一个快速、小巧、功能丰富的...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值