zoukankan      html  css  js  c++  java
  • 用JQuery实现表格隔行变色和突出显示当前行

    用JQuery实现表格隔行变色和突出显示当前行

    上源码

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
        <head>
            <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
            <title>表格隔行背景和突出显示当前行</title>
            <script type="text/javascript" src="jquery-1.4.2.min.js"></script>
            <style type="text/css">
                body{ margin:0 auto; font-size:12px;}
                .data_list td{ 100px;}
            </style>

            <script type="text/javascript">
            /* 当鼠标移到表格上是,当前一行背景变色 */
          $(document).ready(function(){
                $(".data_list tr td").mouseover(function(){
                    $(this).parent().find("td").css("background-color","#d5f4fe");
                });
          })
          /* 当鼠标在表格上移动时,离开的那一行背景恢复 */
          $(document).ready(function(){ 
                $(".data_list tr td").mouseout(function(){
                    var bgc = $(this).parent().attr("bg");
                    $(this).parent().find("td").css("background-color",bgc);
                });
          })
          
          $(document).ready(function(){ 
                var color="#ffeab3"
                $(".data_list tr:odd td").css("background-color",color);  //改变偶数行背景色
                /* 把背景色保存到属性中 */
                $(".data_list tr:odd").attr("bg",color);
                $(".data_list tr:even").attr("bg","#fff");
          })
          </script>
        </head>
        <body>
            <table class="data_list">
            <tr><td> 100 </td>  <td> 100 </td><td> 100 </td><td> 100 </td><td> 100 </td></tr>
            <tr><td> 100 </td>  <td> 100 </td><td> 100 </td><td> 100 </td><td> 100 </td></tr>
            <tr><td> 100 </td>  <td> 100 </td><td> 100 </td><td> 100 </td><td> 100 </td></tr>
            <tr><td> 100 </td>  <td> 100 </td><td> 100 </td><td> 100 </td><td> 100 </td></tr>
            <tr><td> 100 </td>  <td> 100 </td><td> 100 </td><td> 100 </td><td> 100 </td></tr>
            <tr><td> 100 </td>  <td> 100 </td><td> 100 </td><td> 100 </td><td> 100 </td></tr>
            <tr><td> 100 </td>  <td> 100 </td><td> 100 </td><td> 100 </td><td> 100 </td></tr>
            <tr><td> 100 </td>  <td> 100 </td><td> 100 </td><td> 100 </td><td> 100 </td></tr>
            </table>
        </body>
    </html>

  • 相关阅读:
    R绘图 第七篇:绘制条形图(ggplot2)
    R实战 第11篇:处理缺失值
    R实战 第十篇:列联表和频数表
    贝叶斯概率
    分析思维 第三篇:数据分析的三板斧
    分析思维 第二篇:数据指标体系
    分析思维 第一篇:认识数据
    R数据挖掘 第三篇:聚类的评估(簇数确定和轮廓系数)和可视化
    R数据挖掘 第二篇:基于距离评估数据的相似性和相异性
    R数据挖掘 第一篇:聚类分析(划分)
  • 原文地址:https://www.cnblogs.com/roboot/p/4811601.html
Copyright © 2011-2022 走看看