<!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. OpenGL核心之视差映射

    笔者介绍:姜雪伟,IT公司技术合伙人.IT高级讲师,CSDN社区专家,特邀编辑.畅销书作者;已出版书籍:<手把手教你¯的纹理坐标偏移T3来对fragment的纹理坐标进行位移.你能够看到随着深度 ...

  2. (转自aierong原创技术随笔)sqlserver字符串拆分(split)方法汇总

    sqlserver字符串拆分(split)方法汇总   --方法0:动态SQL法declare @s varchar(100),@sql varchar(1000)set @s='1,2,3,4,5, ...

  3. [Ramda] Refactor to Point Free Functions with Ramda using compose and converge

    In this lesson we'll take some existing code and refactor it using some functions from the Ramda lib ...

  4. scala读写文件 comparing values of types Unit and Int using `!=' will always yield true

    由于scala没有对写入文件的支持,所以写文件时通常借助java进行IO操作 //方式一(小文件) /* val s1 = Source.fromFile("D:\\inputword\\h ...

  5. Eclipse Che开发Spring Web应用（入门） （二）

    在上篇博客中我们介绍了如何安装Eclipse Che这种浏览器SDK之后,收到了许多开发者的提问,为了方便初学者开发Java web应用,笔者又一步步实践了spring web开发(demo)过程,欢 ...

  6. 自动化部署脚本，给每一台主机装上JDK，且配好环境变量

    centos6.7 当我们有很多台主机,想在每台机器上都安装一样的某些软件,当然,一台机器一台机器安装也是可以的,但是如果有一键安装所有机器上的软件那是不是很激动人心呢! 首先我们需要制作一台服务器, ...

  7. radio实现第一次点击选中第二次点击取消

    Jquery代码如下: $("#add_form .radio input").bind("click",function(){ var $radio = $( ...

  8. 基于webRTC技术 音频和视频，IM解

    由于原来的文章 http://blog.csdn.net/voipmaker  转载注明出处. 基于WebRTC技术可实现点对点音视频.即时通信.视频会议.最新的系统组件包含: TeleICE NAT ...

  9. Matlab Tricks（二十四）—— title 置于图像之下（包括 subplots 的情形）

    1. 使用 title 的 'position' 属性进行设置 plot(1:10, 1:10), title('y=x', 'position', [5.5, 0]) 2. 使用 xlabel pl ...

  10. 1.在windows下安装rabbitMQ

    a .RabbitMQ是用erLang语言写的,所以我们在安装rabbitMQ之前要先安装erLang. 要安装最新版本的请分别前往 www.erlang.org和www.rabbitmq.com网站 ...