<!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. js,jquery遍历数组,对象

    each的用法  1.数组中的each 复制代码 var arr = [ "one", "two", "three", "four ...

  2. Java开发报表——Grid++Report 报表设计器

    为了让数据显示的更加形象生动,报表在项目中差点儿是很常见的,可是大致能够分为两类: 一,图形:以图形的形式显示数据,比如柱状图,折线图,饼形图等等,这里有许多关于这方面的工具,比如JFreeChart ...

  3. [tmux] Share a tmux session for pair programming with ssh

    By using ssh, you can share a tmux session, making pair programming much easier. We'll learn how to ...

  4. JS表格分页组件：fupage的设计思路和具体用法(未来考虑开源,争取在2015年）

    一.背景         之前在秒针工作的时候,某js高级工程师写了很多自己的组件,其中一套是分页组件,叫做st-grid.不过在我看来,bug太多,我经常给他反馈bug,我也不清楚为啥别人没有发现. ...

  5. Web开发之分页算法，N(N>=3)种解决方案

    在Web开发中,分页是最常用的一个功能了.但是,想简单.灵活.方便地解决分页这个问题,还是需要动点脑筋的. 今天,简要梳理下,过去6年中,亲自遇到的分页问题和解决办法. 1. 定义问题 原由:在页面中 ...

  6. 小强的HTML5移动开发之路（22）—— Adobe DreamWeaver CS6安装与破解

    首先说明一下,这里介绍Adobe DreamWeaver CS6的安装与破解是为了后面的jQuery Mobile框架使用做好准备. 一.首先去Adobe官网下载:http://www.adobe.c ...

  7. Java String对象的经典问题（转）

    public class StringTest { public static void main(String[] args) { String strA = "abc"; St ...

  8. [GeekBand] C++ 基础知识之 The Big Three

    本文是GeekBand课程体系中,侯捷老师讲课内容的部分内容总结. 参考书籍如下:Effitive C++ C++ Primer 第五版 http://blog.csdn.net/lwbeyond/a ...

  9. boost-1.53源代码编译

    1.下载源代码.首先得明确,boost大多数库都仅仅有头文件.链接时不需Lib文件:下面库须要单独编译成库: Boost.Filesystem Boost.GraphParallel Boost.IO ...

  10. javascript数据结构与算法 零(前记+前言)

    前记 这本书Data Structure and Algorithm with Javascript 我将其翻译成<< javascript 数据结构和算法>> 为什么这么翻译 ...