隔行变色【js及JQuery】

最新推荐文章于 2021-07-16 21:19:32 发布
最新推荐文章于 2021-07-16 21:19:32 发布
阅读量454 收藏
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qiyihan0911/article/details/8815574
版权

<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 οnlοad="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
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
使用原生js和jQuery实现表格的隔行变色
JUN_WEB_YANG的博客
10-26 1348
原生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
js隔行变色
qq_40052011的博客
04-15 138
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <style> .box { width: 300px; } ...
使用jQuery实现隔行变色
liu_111111的专栏
04-18 1219
jQuery选择器继承了CSS与Path语言的部分语法，允许通过标签名、属性名或内容对DOM元素进行快速、准确的选择，而不必担心浏览器的兼容性，通过jQuery选择器对页面元素的精准定位，才能完成元素性和行为的处理。 选择器的优势？ 与传统的JavaScript获取页面元素和便携食物相比，jQuery选择器具有明显的优势，具体表现在一下两个方面： *代码更简单 *完善的检测机制 -->
JS 隔行变色
网络剑客
02-27 917
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 129
<head> <title></title> <script type="text/javascript"> onload = function () { document.getElementById('btn').onclick = function () { ...
jquery选取商品隔行变色
09-22
"jQuery选取商品隔行变色"是一个常见的网页交互功能，主要用于电商网站的商品列表展示，使得用户在浏览长列表时能更清晰地区分各个项目。下面将详细解释如何使用jQuery实现这一功能。 首先，我们需要理解jQuery库的...
JS与jQuery实现隔行变色的方法
10-21
总之，JavaScript和jQuery都能有效地实现隔行变色，但jQuery的简洁性和易用性使其在大多数情况下成为首选。同时，开发者应当根据项目需求和团队习惯选择最合适的实现方式，并注意保持代码的可维护性和可扩展性。
jQuery插件实现表格隔行变色及鼠标滑过高亮显示效果代码
10-22
在这个例子中，我们将深入探讨如何使用jQuery创建一个插件，以实现表格隔行变色以及鼠标滑过时的高亮显示效果。 首先，我们来看一下基本的HTML结构，这里包含了一个简单的表格，用于展示插件的效果： ```html ...
jQuery隔行变色与普通JS写法的对比
10-27
普通JS写法与jQuery选择器写法,选择table的行，隔一行，选择一行，感兴趣的朋友可以参考下哈，希望对你有所帮助
jQuery实现隔行变色的方法分析(对比原生JS)
10-21
本文将深入探讨如何使用jQuery实现隔行变色，并与原生JavaScript进行对比。 首先，我们来看原生JavaScript实现隔行变色的方法。通过`document.getElementsByTagName`方法，我们可以获取到页面上的所有表格元素...
js实现隔行变色操作鼠标经过效果
03-24
NULL 博文链接：https://yuxingxing1988.iteye.com/blog/1099511
JS之隔行变色
小书包的博客
01-09 871
JS之隔行变色 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>隔行变色</title> </head> <style> * { margin: 0px; padding: 0px; } di...
JS实现隔行变色
kumayato的博客
05-11 461
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <style> .box { width: 300px; } li { line-height: 30px;
js 实现隔行变色
WDS的博客
03-26 1198
隔行变色
js实现隔行换色
taokai的专栏
01-22 1387
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】原生 js 监测 某个 DOM进入 可视区
呆呆狗
07-16 519
就是 这个 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.
隔行变色java代码_纯js实现隔行变色效果
weixin_34194499的博客
03-02 277
本文实例为大家分享了js实现隔行变色的具体代码，供大家参考，具体内容如下function createTable(){//创建表格var table = document.createElement("table");//设置表格的行数for(var i=0;i<4;i++){var tr = document.createElement("tr");//设置表格的列数for( var j=...
jquery隔行变色
最新发布
06-20
要实现表格（通常是 `<table>`）隔行变色，你可以使用 jQuery 的 `each()` 方法结合 CSS 类选择器。以下是一个简单的示例： ```javascript $(document).ready(function() { // 获取所有的 table 行 var rows = $...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值