【JavaWeb】TableDemo 表格隔行显色+鼠标悬停高亮显示

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/coralime/article/details/82217617

【普通表格-非隔行显色】

• approach1

 <script type="text/javascript">

        window.onload = function () {

            //#-----非隔行显色---需要css辅助-------------------------------------------
            function mouseover (){
                var rows = document.getElementsByTagName('tr');//取得行
                for(var i=0 ;i<rows.length; i++)
                {
                    rows[i].onmouseover = function(){//鼠标移上去,添加一个类'hilite'
                        this.className += 'hilite';
                    }
                    rows[i].onmouseout = function(){//鼠标移开,改变该类的名称
                        this.className = this.className.replace('hilite','');
                    }
                }

            }

 </script>

需要CSS文件渲染颜色，#tbl 对应 <table id = "tbl">

<style type="text/css">
    #tbl tr:hover,#tbl tr.hilite
    {
        background-color:#009B63;
        color:#ffffff;
    }
</style>

Effect

• approach2

  <script type="text/javascript">
     window.onload = function () {
            //#-----非隔行显色-----------------------------------------------------
            function mouseover (){
                $("tr").hover(
                    function() {
                        $(this).css("background", "#c8bfe7");   //鼠标移动上去的颜色
                    },
                    function() {
                        $(this).css("background", "#ffdfef");   //鼠标离开的颜色
                    }
                );
            }
     }
  </script>

Effect

• approach3

<script type="text/javascript">
    
    window.onload = function () { 
        
        function mouseover (){
                
                var tablename = document.getElementById("tbl");

                var oRows = tablename.getElementsByTagName("tr");

                for (var i = 0; i < oRows.length; i++) {

                    oRows[i].onmouseover = function() {
                        this.style.backgroundColor = "#ffa4a4";
                    }

                    oRows[i].onmouseout = function() {
                        this.style.backgroundColor = "#9dffff";
                    }
                }
         }
    }

</script>

Effect 

【表格隔行显色】

需要设置一个变量 [oldColor] 来保存该行原本的颜色

<script type="text/javascript">

    window.onload = function () {

            //表格隔行显色，鼠标悬停高亮
            function mouseover (){
                //表格隔行显色，鼠标悬浮高亮显示
                var oTab = document.getElementById('tbl');
                var oldColor = '';//用于保存原来一行的颜色

                for(var i = 0; oTab.tBodies[0].rows.length; i++){

                    //当鼠标移上去，改变字体色-背景色
                    oTab.tBodies[0].rows[i].onmouseover = function () {
                        oldColor = this.style.background;
                        this.style.background = "#009B63";
                        this.style.color = "#ffffff";
                    };

                    //当鼠标移开，恢复原来的颜色
                    oTab.tBodies[0].rows[i].onmouseout = function () {
                        this.style.background = oldColor;
                        this.style.color = "#000000";
                    };

                    //隔行显色
                    if(i%2){
                        oTab.tBodies[0].rows[i].style.background = "#EAF2D3";
                    }
                    else{
                        oTab.tBodies[0].rows[i].style.background = "";
                    }
                }
            }
    }

</script>

Effect 

【完整代码】

#1-> Servlet从数据库中读取数据封装成JSONArray

可参考：https://blog.csdn.net/coralime/article/details/81663354

[{"ID":1,"birthdate":"1989-10-14","nationality":"Australia","username":"Mia Wasikowska"},{"ID":2,"birthdate":"1963-06-09","nationality":"USA","username":"Johnny Depp"},{"ID":3,"birthdate":"1966-05-26","nationality":"England","username":"Helena Bonham Carter"},{"ID":4,"birthdate":"1982-11-12","nationality":"NewYork","username":"Anne Hathaway"},{"ID":5,"birthdate":"1969-02-05","nationality":"England","username":"Michael Sheen"},{"ID":6,"birthdate":"1964-04-20","nationality":"USA","username":"Crispin Glover"},{"ID":7,"birthdate":"1958-08-25","nationality":"USA","username":"Tim Burton"}]

#2-> 通过printwriter传值到前端

PrintWriter pw = response.getWriter();
pw.print(jsonArray);
pw.flush();
pw.close();

 #3-> JSP页面通过ajax接收，渲染到Table显示

index.jsp 页面

注意：function mouseover() 要放在ajax的complete()方法中，不然会报错，ajax-async：true（默认异步方式）

设置了loading加载动画显示，具体可参考：https://blog.csdn.net/coralime/article/details/82215613

<%--
  Created by IntelliJ IDEA.
  User: Coraline
  Date: 2018/8/30
  Time: 9:47
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>TableDemo</title>

    <%--给标题左侧加上logo--%>
    <link rel="shortcup icon" href="pic/flower_72px_1132301_easyicon.net.png">
    <%--链接外部样式表--%>
    <link rel="stylesheet" type="text/css" href="styles.css">

    <script src="./scripts/jquery.min.js"></script>

    <script type="text/javascript">

        window.onload = function () {

            //加载动画效果
            function showLoad(){
                $('#fountainG').show();
            }
            //隐藏动画效果
            function hiddenLoad(){
                $('#fountainG').hide();
            }

            //表格隔行显色，鼠标悬停高亮
            //#--1------------------------------------------------------------
            function mouseover (){
                //具体代码对应上述4种实现方式
            }

            $.ajax({
                type:"post",
                url:"TableDemoServlet",
                async:true, //默认-异步（true） 同步-false
                dataType:"json",
                beforeSend: function (){
                    //ajax刷新前加载load动画
                    showLoad();
                },
                success:function (dataArray) {

                    var tableBody = "<tbody id='tableBody'>";

                    for (var i = 0; i < dataArray.length; i++) {

                        tableBody += "<tr>";

                        tableBody += "<td>"+dataArray[i]['ID']+"</td>";
                        tableBody += "<td>"+dataArray[i]['username']+"</td>";
                        tableBody += "<td>"+dataArray[i]['birthdate']+"</td>";
                        tableBody += "<td>"+dataArray[i]['nationality']+"</td>";

                        tableBody += "</tr>";
                    }

                    tableBody += "</tBody>";

                    $("tbody#tableBody").remove();//删除已有表格
                    $("#tableHead").after(tableBody);

                },
                error:function (e) {
                    //隐藏load动画
                    hiddenLoad();
                    alert("错误！"+e.status);
                },
                complete:function () {
                    //完成以后隐藏load动画
                    hiddenLoad();
                    //实现鼠标悬停高亮+隔行显色
                    mouseover();
                }
            });
        }

    </script>

</head>

<body>
<table id="tbl" align="center">

    <caption>User Account Information</caption>

    <thead id="tableHead">
    <tr>
        <th>ID</th>
        <th>UserName</th>
        <th>Birthdate</th>
        <th>Nationality</th>
    </tr>
    </thead>

    <tbody id="tableBody"></tbody>

</table>

<%--load动画效果--%>
<div id="fountainG">
    <div id="fountainG_1" class="fountainG">
    </div>
    <div id="fountainG_2" class="fountainG">
    </div>
    <div id="fountainG_3" class="fountainG">
    </div>
    <div id="fountainG_4" class="fountainG">
    </div>
    <div id="fountainG_5" class="fountainG">
    </div>
    <div id="fountainG_6" class="fountainG">
    </div>
    <div id="fountainG_7" class="fountainG">
    </div>
    <div id="fountainG_8" class="fountainG">
    </div>
</div>

</body>
</html>

#tbl
{
    font-family: "Trebuchet MS",Arial,Helvetica,sans-serif;
    width: 30%;
    border-collapse: collapse;
}

#tbl caption
{
    font-size: 2em;
    color: #009B63;
    font-weight: bold;
}

#tbl th
{
    font-size: 1.1em;
    border: 1px solid rgb(0,136,88);
    text-align: center;
    padding-top: 5px;
    padding-bottom: 5px;
    color: #ffffff;
    background-color: #009B63;
    width: 10%;
}

#tbl td
{
    font-size:1em;
    border: 1px solid #98bf21;
    padding: 3px 3px 3px 3px;
    width: 10%;
}

/*----------------------------加载loading动画效果---1-----------------------------*/
#loader {
    position: absolute;
    left: 50%;
    top: 50%;
    z-index: 1;
    /*width: 20px;*/
    /*height: 20px;*/
    margin: -25px 0 0 -25px;
    border: 6px solid #f3f3f3;
    border-radius: 50%;
    border-top: 6px solid #00A76F;
    border-bottom: 6px solid #00A76F;
    width: 50px;
    height: 50px;
    -webkit-animation: spin 2s linear infinite;
    animation: spin 2s linear infinite;
}

@-webkit-keyframes spin {
    0% {
        -webkit-transform: rotate(0deg);
    }
    100% {
        -webkit-transform: rotate(360deg);
    }
}

@keyframes spin {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}


/*----------------------------加载loading动画效果---2-----------------------------*/
#fountainG{
    position:relative;
    margin:10% auto;
    width:240px;
    height:29px}

.fountainG{
    position:absolute;
    top:0;
    background-color:#33cc99;
    width:29px;
    height:29px;
    -webkit-animation:bounce_fountainG 1.3s infinite normal;
    -moz-animation:bounce_fountainG 1.3s infinite normal;
    -o-animation:bounce_fountainG 1.3s infinite normal;
    -ms-animation:bounce_fountainG 1.3s infinite normal;
    animation:bounce_fountainG 1.3s infinite normal;
    -moz-transform:scale(.3);
    -webkit-transform:scale(.3);
    -ms-transform:scale(.3);
    -o-transform:scale(.3);
    transform:scale(.3);
    border-radius:19px;
}

#fountainG_1{
    left:0;
    -moz-animation-delay:0.52s;
    -webkit-animation-delay:0.52s;
    -ms-animation-delay:0.52s;
    -o-animation-delay:0.52s;
    animation-delay:0.52s;
}

#fountainG_2{
    left:30px;
    -moz-animation-delay:0.65s;
    -webkit-animation-delay:0.65s;
    -ms-animation-delay:0.65s;
    -o-animation-delay:0.65s;
    animation-delay:0.65s;
}

#fountainG_3{
    left:60px;
    -moz-animation-delay:0.78s;
    -webkit-animation-delay:0.78s;
    -ms-animation-delay:0.78s;
    -o-animation-delay:0.78s;
    animation-delay:0.78s;
}

#fountainG_4{
    left:90px;
    -moz-animation-delay:0.91s;
    -webkit-animation-delay:0.91s;
    -ms-animation-delay:0.91s;
    -o-animation-delay:0.91s;
    animation-delay:0.91s;
}

#fountainG_5{
    left:120px;
    -moz-animation-delay:1.04s;
    -webkit-animation-delay:1.04s;
    -ms-animation-delay:1.04s;
    -o-animation-delay:1.04s;
    animation-delay:1.04s;
}

#fountainG_6{
    left:150px;
    -moz-animation-delay:1.17s;
    -webkit-animation-delay:1.17s;
    -ms-animation-delay:1.17s;
    -o-animation-delay:1.17s;
    animation-delay:1.17s;
}

#fountainG_7{
    left:180px;
    -moz-animation-delay:1.3s;
    -webkit-animation-delay:1.3s;
    -ms-animation-delay:1.3s;
    -o-animation-delay:1.3s;
    animation-delay:1.3s;
}

#fountainG_8{
    left:210px;
    -moz-animation-delay:1.43s;
    -webkit-animation-delay:1.43s;
    -ms-animation-delay:1.43s;
    -o-animation-delay:1.43s;
    animation-delay:1.43s;
}

@-moz-keyframes bounce_fountainG{
    0%{
        -moz-transform:scale(1);
        background-color:#33cc99;
    }

    100%{
        -moz-transform:scale(.3);
        background-color:#0099cc;
    }

}

@-webkit-keyframes bounce_fountainG{
    0%{
        -webkit-transform:scale(1);
        background-color:#33cc99;
    }

    100%{
        -webkit-transform:scale(.3);
        background-color:#0099cc;
    }

}

@-ms-keyframes bounce_fountainG{
    0%{
        -ms-transform:scale(1);
        background-color:#33cc99;
    }

    100%{
        -ms-transform:scale(.3);
        background-color:#0099cc;
    }

}

@-o-keyframes bounce_fountainG{
    0%{
        -o-transform:scale(1);
        background-color:#33cc99;
    }

    100%{
        -o-transform:scale(.3);
        background-color:#0099cc;
    }

}

@keyframes bounce_fountainG{
    0%{
        transform:scale(1);
        background-color:#33cc99;
    }

    100%{
        transform:scale(.3);
        background-color:#0099cc;
    }
}

【参考】 

CSS:当鼠标移动到表格的某一行时改变其背景颜色

https://www.cnblogs.com/KeenLeung/archive/2013/03/10/2952752.html

实现鼠标移动表格行上，此行背景变色研究

https://blog.csdn.net/aspnet2002web/article/details/6024447

js实现表格隔行变色和鼠标移入高亮

https://blog.csdn.net/Q_004/article/details/77431097

表格隔行变色，并且鼠标移入高亮显示，鼠标移出显示原来的颜色

https://blog.csdn.net/xuan6251237011/article/details/37942103