zoukankan      html  css  js  c++  java
  • table变色

    <!DOCTYPE html>
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>鼠标滑过效果</title>

    <script src="~/Scripts/jquery-1.10.2.min.js"></script>
    <script type="text/javascript">
    $(document).ready(function() {

    $("#orderedlist tbody tr").css({"text-align":"center"});
    $("#orderedlist tbody tr").hover(function() {
    $(this).addClass("blue");

    }, function() {
    $(this).removeClass("blue");
    }).click(function ( ) {
    // alert($(this).children("td").eq(0).attr("id"));//获取td
    alert($(this).children("td").eq(1).text());//获取td
    });
    });
    </script>
    <style>
    .blue {
    background: #bcd4ec;
    cursor: pointer;
    }
    </style>
    </head>
    <body>
    <table id="orderedlist" width="50%" border="0" cellspacing="0" cellpadding="0">
    <thead id="th1">
    <tr>
    <th>姓名</th>
    <th>年龄</th>
    <th>QQ</th>
    <th>Email</th>
    </tr>
    </thead>
    <tbody id="tb1">
    <tr>
    <td id="tid1">AAAA</td>
    <td id="num1">20</td>
    <td>1111</td>
    <td>aaaa@gmail.com</td>
    </tr>
    <tr>
    <td id="tid2">BBBB</td>
    <td id="num2">21</td>
    <td>2222</td>
    <td>bbbb@gmail.com</td>
    </tr>
    <tr>
    <td id="tid3">CCCC</td>
    <td id="num3">22</td>
    <td>333</td>
    <td>cccc@gmail.com</td>
    </tr>
    </tbody>
    </table>
    </body>
    </html>

  • 相关阅读:
    linux下实现nginx反向代理
    linux下实现nginx安装实现端口区分,域名区分
    redis整合spring
    linux下安装redis以及redis集群
    Kindeditor编辑器
    ActiveMQ
    redis(保存邮件激活码)
    AngularJS (验证码倒计时)
    linux部署项目(oracle+redis+activeMQ+elasticSearch+tomcat+JDK8)
    WebService
  • 原文地址:https://www.cnblogs.com/liucyi/p/5188853.html
Copyright © 2011-2022 走看看