<!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. php生成唯一字符串

    $units = array(); //循环生成好多个唯一字符串 for($i=0;$i<1000000;$i++){ $units[]=md5(uniqid(md5(microtime(tru ...

  2. POJ 3252 Round Numbers(数位dp&amp;记忆化搜索)

    题目链接:[kuangbin带你飞]专题十五 数位DP E - Round Numbers 题意 给定区间.求转化为二进制后当中0比1多或相等的数字的个数. 思路 将数字转化为二进制进行数位dp,由于 ...

  3. 【hdu 1067】Gap

    Time Limit: 20000/10000 MS (Java/Others) Memory Limit: 65536/32768 K (Java/Others) Total Submission( ...

  4. js页面加载函数

    在未加载完文档,使用jquery选择器选择元素后,如果立即绑定事件进行调用,会引起js的报错(can not read property of undefined),导致事件不能绑定成功. alert ...

  5. python 爬取bilibili 视频信息

    抓包时发现子菜单请求数据时一般需要rid,但的确存在一些如游戏->游戏赛事不使用rid,对于这种未进行处理,此外rid一般在主菜单的响应中,但有的如番剧这种,rid在子菜单的url中,此外返回的 ...

  6. python io操作

    一次性读取 # 读取文件 # 默认打开文件的方式是只读 file = None try: file = open("f:/test.sql") print(file.name) # ...

  7. 华为云软件开发云：容器DevOps，原来如此简单！

    当开发团队把代码提交到 Git 应用仓库的那一刻,他们心里在想什么? 祈祷没有bug?渴望回家补觉?产品经理Go Die? 对,也不对.因为这只是最终发布万里长征的一小步,接下来要面对测试环境.生产环 ...

  8. poj 3071 可能DP

    http://poj.org/problem? id=3071 推方程不难,可是难在怎么算 dp[i][j]表示第i场时第j仅仅队伍存活下来的概率 方程:dp[i][j]=sigma(dp[i-1][ ...

  9. [LeetCode]Word Break 特里

    意甲冠军:推断字符串给定的字符串是否构成词典. 来推断目标字符串相匹配整个字典.我们需要来推断目标字符串的每个前缀开始的下一场比赛,这需要匹配目标字符串的成功,所有前缀的枚举. class TrieN ...

  10. java server wrapper 和 maven assembly 插件

    Java Service Wrapper工具YAJSW 简介信息 YAJSW是一个开源的Java服务包装(Java Service Wrapper)工具.YAJSW允许您把任何应用程序安装为windo ...