<!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. [Grid Layout] Use the minmax function to specify dynamically-sized tracks

    Using minmax() is an amazingly useful way to specify boundaries for the smallest and largest size a ...

  2. Android定位开发之百度定位、高德定位、腾讯定位，三足鼎立一起为我所用！

    这几天的项目不是非常紧.于是想为未来可能要做的项目做一些技术储备. 下一个项目非常有可能是定位开发,须要用到手机定位功能,于是查了查如今比較流行的第三方定位,最火的基本上就是百度定位>高德定位& ...

  3. [Django] Building the rest API

    Install the rest api framework: pip install djangorestfamework In settings.py: INSTALLED_APPS = [ 'd ...

  4. ScrollView嵌套ListView问题

    ScrollView嵌套ListView问题 导致Listview  第一主角 它是 Listview 的item 显示器的数量是不完全. 这是因为item 中间 Textview 话是太多的问题 一 ...

  5. Unity3d 配置OpenCV（EmguCV） 周围环境

    最近毕业.我们一直在研究如何Unity正在使用EmguCV,最后,有些吃老本的今天. 我的环境:Unity3d 4.3.1f             libemgucv-windows-univers ...

  6. NOIP模拟 cube - 数学

    题目原文: 豆豆还是觉得自己智商太低了,就又去做数学题了.一看到题,他就觉得自己可能真的一点智商都没有.便哭着跑来像 dalao 求教:如果存在正整数 A,B ,满足 A3 - B3 = x ,则称质 ...

  7. 【9705】&&【a801】细胞

    Time Limit: 10 second Memory Limit: 2 MB 问题描述 一矩形阵列由数字1~9代表细胞,细胞的定义是沿细胞数字上下左右如果还是细胞数字则为同一细胞,求给定矩形阵列的 ...

  8. 【29.82%】【codeforces 703D】Mishka and Interesting sum

    [题解] 题意: 给n个数字组成有序数列; 给m个询问. 对于每个询问区间.输出这个区间里面出现次数为偶数次的所有数的异或值; 做法: 我们可以先求出这段区间里面所有(包括重复的数字)数字的异或值p1 ...

  9. java获取本机IP地址，非127.0.0.1

    综合了网上找的代码,整理的,Windows和Linux都可以用. private static String getHostIp(){ try{ Enumeration<NetworkInter ...

  10. Hadoop和RDBMS的混合系统介绍

    现在大数据概念被时常提起,社会各界对其关注度越来越高.往往越是火热的东西,人们越容易忽略它的本质.在 slides 中,我首先按照自己的理解,简单的理顺数据处理领域的发展历程.之后,落脚点是两个比较有 ...