首页 > Web开发 > 详细

jquery简单实现表格隔行变色

时间:2019-10-30 01:11:41      阅读:119      评论:0      收藏:0      [点我收藏+]

小知识点:odd的过滤选择器大的使用

html代码:

 <table>
        <tr>
            <td>用户名</td>
            <td>年龄</td>
            <td>编号</td>
        </tr>
        <tr>
            <td>佩奇</td>
            <td>5</td>
            <td>344</td>
        </tr>
        <tr>
            <td>尼克</td>
            <td>8</td>
            <td>233</td>
        </tr>
        <tr>
            <td>莫妮卡</td>
            <td>16</td>
            <td>277</td>
        </tr>
        <tr>
            <td>雷奥</td>
            <td>14</td>
            <td>455</td>
        </tr>
        <tr>
            <td>恒猪猪</td>
            <td>3</td>
            <td>588</td>
        </tr>
    </table>

css代码:

      body,div,p,table,tr,td{
            margin: 0;
            padding: 0;
        }
        table{
            border-collapse: collapse;
            border-spacing: 0;
            border: 1px solid #ccc;
        }
        tr,td{
            border: 1px solid #ccc;
        }
        td{
            width: 100px;
            /* background-color: ;; */
        }

jquery代码

        var tdstrs=$(‘tr:odd‘)
        tdstrs.css(‘backgroundColor‘,‘#eee‘)

效果

技术分享图片

 

 

 

总结:该实现用的是jquery中的过滤选择器 :odd【获取索引号为奇数的元素】

          使用方法:$("其他选择器:odd")

         获取索引号为偶数的元素   :event 用法同上

 注:老马前端视频学习练习

jquery简单实现表格隔行变色

原文:https://www.cnblogs.com/xinyulove/p/11762455.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!