<!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>

jquery table 隔行变色+点谁谁变色的更多相关文章

  1. JQuery实现隔行变色和突出显示当前行 效果

    运行效果如下图: jquery关键代码: <script type="text/javascript"> //该文件为:js.js // 当鼠标移到表格上是,当前一行背 ...

  2. 简单的css js控制table隔行变色

    (1)用expression 鼠标滑过变色: <style type="text/css"><!-- table { background-color:#0000 ...

  3. 隔行变色---简单的css js控制table隔行变色

    (1)用expression 鼠标滑过变色: <style type="text/css"><!-- table { background-color:#0000 ...

  4. jQuery的基本过滤器与jQuery实现隔行换色实例

    没加过滤器之前: 加过滤器之后: 总的代码: <!DOCTYPE html> <html> <head> <meta charset="UTF-8& ...

  5. jQuery table td可编辑

    参考链接: http://www.freejs.net/ http://www.freejs.net/article_biaodan_34.html http://www.freejs.net/sea ...

  6. jquery.Table实现的翻页功能比较完整漂亮，本想扩展个模版DIV

    jquery.dataTable实现的翻页功能比较完整漂亮,本想提取其的翻页部分,再结合模版DIV,bootstrop实现聊天记息的展示. jquery.Table 与table结合的较紧,不能在很下 ...

  7. jQuery实现table隔行换色和鼠标经过变色

    一.隔行换色 $("tr:odd").css("background-color","#eeeeee"); $("tr:even& ...

  8. jquery table的隔行变色 鼠标事件

    一.鼠标事件 mouseover(function(){}); 鼠标移动到目标事件 mouseout(function(){}); 鼠标离开目标的事件 二.具体应用代码 <body> &l ...

  9. jquery学习笔记(4)--实现table隔行变色以及单选框选中

    <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> &l ...

随机推荐

  1. 【u211】编码

    Time Limit: 1 second Memory Limit: 128 MB [问题描述] 假设phi(W)得到是按照以下算法编码后的结果: 1. 如果W的长度为1那么phi(W)即为W: 2. ...

  2. [Angular] Pluck value from Observable

    export class MailFolderComponent implements OnInit{ title: Observable<string>; messages: Obser ...

  3. 监控tcp，占用端口---netstat命令

    netstat命令监控tcp,占用端口等等  netstat命令是一个监控TCP/IP网络的非常有用的工具,它可以显示路由表.实际的网络连接以及每一个网络接口设备的状态信息,语 法:netstat [ ...

  4. Methods and systems to control virtual machines

    Methods and systems are provided to control the execution of a virtual machine (VM). A VM Monitor (V ...

  5. 【noip模拟】连环

    [题目描述] 惠子说:“连环可解也”. 这说明他是一个破解机关的高手,连连环都能解开,鲁班锁什么的自然不在话下.一位鲁班的后人非常不服气,于是找到惠子,给他出了一道题. 他首先给了惠子一个长度为 n的 ...

  6. 理解Java字符串常量池与intern()方法

    String s1 = "Hello"; String s2 = "Hello"; String s3 = "Hel" + "lo ...

  7. Cocos2d-x 3.1.1 Lua演示样例 ActionManagerTest（动作管理）

    Cocos2d-x 3.1.1 Lua演示样例 ActionManagerTest(动作管理) 本篇博客介绍Cocos2d-x的动作管理样例,这个样例展示了Cocos2d-x的几个动作: MoveTo ...

  8. react中对象扩展运算符使用问题

    看别人代码看到 render() { return <Modal {...this.props}> {this.props.children} </Modal> } 对其中的{ ...

  9. 【BZOJ 3676】[Apio2014]回文串

    [链接] 链接 [题意] 给你一个字符串s. 定义一个子串的出现值为它出现的次数*字符串的长度. 让你求里面的回文子串的最大出现值 |s|<=3e5 [题解] 马拉车算法里面. 只有在回文往外扩 ...

  10. postman VS restlet client基本使用

    postman与restlet都是使用的google浏览器的插件(出不去自行解决,you get!),此两款软件的强大这里就不在赘述了,postman的网上说明很多,restlet的中文配置很少了.这 ...