zoukankan      html  css  js  c++  java
  • jquery table 隔行变色+点谁谁变色

    <!DOCTYPE html>
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
        <title></title>
    <meta charset="utf-8" />
        <script src="jquery-3.3.1.js"></script>
        <script>
            $(function () {
                $('#btn').click(function () {
                    $('#tb tr:first').css('fontSize', '30px');//第一行
                    $('#tb tr:last').css('color', 'red');//最后一行
                    $('#tb tr:gt(0):lt(3)').css('fontSize', '28px');//正文前三行
                    $('#tb tr:odd').css('backgroundColor', 'red');//偶数行

                });
                $('#tb tr').click(function () {
                    $(this).css('backgroundColor', 'yellow').siblings('tr').css('backgroundColor','');//点谁谁变黄色
                });
            });
        </script>
    </head>
    <body>
        <input type="button" name="name" value="显示效果" id="btn" />
        <table border="1" id="tb" style="cursor:pointer">
            <tr>
                <td>姓名</td>
                <td>年龄</td>
            </tr>
            <tr>
                <td>张三</td>
                <td>30</td>
            </tr>
            <tr>
                <td>李四</td>
                <td>50</td>
            </tr>
            <tr>
                <td>王五</td>
                <td>48</td>
            </tr>
            <tr>
                <td>陈六</td>
                <td>17</td>
            </tr>
            <tr>
                <td>赵七</td>
                <td>56</td>
            </tr>
            <tr>
                <td>张八</td>
                <td>98</td>
            </tr>
            <tr>
                <td>吕九</td>
                <td>20</td>
            </tr>
            <tr>
                <td>汇总</td>
                <td>600</td>
            </tr>
        </table>
    </body>
    </html>
  • 相关阅读:
    sort,uniq,wc,tr
    cut
    more,less,head,tail
    cat
    mv
    WordPress调用全文阅读和截取文章摘要
    板邓:css ol 列表序列号样式
    小板邓:wordpress如何扩展TinyMCE编辑器,添加自定义按钮及功能
    wordpress前台显示顶部管理工具导航条
    SQL的主键和外键的作用
  • 原文地址:https://www.cnblogs.com/dxmfans/p/9434836.html
Copyright © 2011-2022 走看看