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

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

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: CoralineDate: 2018/8/30Time: 9:47To 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） 同步-falsedataType:"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

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

表格隔行变色_CSS实现鼠标悬停高亮
<!doctype html> <html> <head><meta http-equiv="content-type" content= ...
jquery 表格（鼠标悬停改变改变行背景+隔行换色）
NUM1:鼠标悬停改变改变行背景: NUM2:隔行换色: HTML: <table border="1"><thead><tr><th&g ...
html鼠标悬停填充表格,鼠标移到表格上时，鼠标所在行放大高亮显示【实例】...
本文给大家介绍一个比较有趣的CSS Table表格,当鼠标移到表格上时,鼠标所在行放大高亮显示. 鼠标所在行放大高亮显示 HTML代码html> Table V01 * { margin: 0p ...
《Unity开发实战》——3.9节鼠标悬停时高亮显示材质
本节书摘来自华章社区<Unity开发实战>一书中的第3章,第3.9节鼠标悬停时高亮显示材质,作者 (爱尔兰)Matt Smith (巴西)Chico Queiroz,更多章节内容可以访问云 ...
AD19实时高亮显示网络，当鼠标悬停在网络上时能自动高亮
今天检查电路时发现有网络,没连接到,很伤心,发现这是版本的问题AD16能实时高亮显示而AD19不能 S+P选住某个网络,与CTRL+H相同效果 CTRL+鼠标左键也可以显示但这都不是我想要的效果,我 ...
js,jq表格/文本内容溢出，用三个点替代，鼠标悬停时显示全部内容
项目中遇到如果表格内容太多的话页面会很丑,所以想到给表格一个最大宽度之类的,当内容超出时用三个点代替超出的部分,当鼠标悬停时显示全部的信息,下面百度到两个案例,都可以实现: 1.在表格下面在添加一模一 ...
Bootstrap3 表格-鼠标悬停
通过添加 .table-hover 类可以让 <tbody> 中的每一行对鼠标悬停状态作出响应. <table class="table table-hover" ...
html鼠标悬停边框变虚线,css设置表格的边框为实线还是虚线，+鼠标悬停显示提示字...
虚线在css里面添加 td {border-bottom:1px dashed #000000;} 实线在css里面添加 td {border:1px solid black;} -------- ...
FarPoint.Win.Spread 表格鼠标悬停展示表格数据并且控制每行字数代码备忘
注册事件,并进行配置 //鼠标悬停显示相关 this.spdMain.TextTipFetch += new FarPoint.Win.Spread.TextTi ...

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

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

最新文章

热门文章