zoukankan      html  css  js  c++  java
  • Jquery 实现表格的隔行换色

    编写代码

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>project</title>
        <!-- 导入jquery文件-->
    	<script src="jqueryjquery.js"></script>
    </head>
    <style>
        table{
            text-align: center;     
        }
        #top td{
            /* border-bottom:2px solid black; */
            font-size:20px; 
            font-weight:800px;
        }
    </style>
    <body>
        <table width="600px" cellpadding="10px" cellspacing="0">
            
            <tr id="top" >
                <td>产品名称</td>
                <td>产地</td>
                <td>厂商</td>    
            </tr>
            <tr>
                <td>爱美电视机</td>
                <td>福州</td>
                <td>爱美电子</td>
            </tr>
            <tr>
                <td>美好微波炉</td>
                <td>北京</td>
                <td>美好集团</td>
            </tr>
            <tr>
                <td>联想电脑</td>
                <td>沈阳</td>
                <td>联想集团</td>
            </tr>
            <tr>
                <td>编程词典</td>
                <td>长春</td>
                <td>明日科技</td>
            </tr>
            <tr>
                <td>编程词典</td>
                <td>长春</td>
                <td></td>
            </tr>
            <tr>
                <td><p>编程词典</p></td>
                <td>长春</td>
                <td></td>
            </tr>
        </table>
        <script>
            $(document).ready(function(){
                $("tr:odd").css("backgroundColor", "yellow");//奇数行
                $("tr:even:gt(0)").css("backgroundColor", "pink");//偶数行(去掉第一行)【gt(0):大于0】
                //$("tr:even:not(:first)").css("backgroundColor", "pink");//
                //$("tr:eq(0)").css("backgroundColor", "white");//
                $('#top>td').css('borderBottom', '2px solid black');
                // $('#top>td').css('border-Bottom', '1px solid black');
                // $('#top').css('color', 'red');
                // $("table").css("borderColor", "black");
                
                //移动变色
                var color;
                $("tr:gt(0)").hover(function(){ 
                    color = $(this).css("backgroundColor");
                    $(this).css("backgroundColor","#00aa00");
                },function(){
                    $(this).css("backgroundColor",color);
                })
    
                //点击事件
                $("tr").click(function(){
                    $(this).css("background","#00ff00")
                })
    
                //选择器(过滤)
                $("td:empty").css("background","#00cc00") //空的
                $("tr:eq(3):parent").css("background","#0000ff") //非空
                td:has(p) //有p标签和单元格 (放选择器)
                td:contains("长春").css //包含长春的单元格 (只能放文本)
                td:visible //所有可见的
    
            });
        </script>
    </body>
    </html>
    

    运行结果


  • 相关阅读:
    (转)【web前端培训之前后端的配合(中)】继续昨日的故事
    ural(Timus) 1136. Parliament
    scau Josephus Problem
    ACMICPC Live Archive 6204 Poker End Games
    uva 10391 Compound Words
    ACMICPC Live Archive 3222 Joke with Turtles
    uva 10132 File Fragmentation
    uva 270 Lining Up
    【转】各种字符串哈希函数比较
    uva 10905 Children's Game
  • 原文地址:https://www.cnblogs.com/d534/p/15147576.html
Copyright © 2011-2022 走看看