【普通表格-非隔行显色】
approach1
window.onload = function () {
//#-----非隔行显色---需要css辅助-------------------------------------------
function mouseover (){
var rows = document.getElementsByTagName('tr');//取得行
for(var i=0 ;i
{
rows[i].onmouseover = function(){//鼠标移上去,添加一个类'hilite'
this.className += 'hilite';
}
rows[i].onmouseout = function(){//鼠标移开,改变该类的名称
this.className = this.className.replace('hilite','');
}
}
}
需要CSS文件渲染颜色，#tbl 对应
#tbl tr:hover,#tbl tr.hilite
{
background-color:#009B63;
color:#ffffff;
}
Effect
approach2
window.onload = function () {
//#-----非隔行显色-----------------------------------------------------
function mouseover (){
$("tr").hover(
function() {
$(this).css("background", "#c8bfe7"); //鼠标移动上去的颜色
},
function() {
$(this).css("background", "#ffdfef"); //鼠标离开的颜色
}
);
}
}
Effect
approach3
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";
}
}
}
}
Effect
【表格隔行显色】
需要设置一个变量 [oldColor] 来保存该行原本的颜色
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 = "";
}
}
}
}
Effect
【完整代码】
#1-> Servlet从数据库中读取数据封装成JSONArray
可参考：https://blog..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..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.
--%>
TableDemo
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 = "
";
for (var i = 0; i < dataArray.length; i++) {
tableBody += "
";
tableBody += "
"+dataArray[i]['ID']+"";
tableBody += "
"+dataArray[i]['username']+"";
tableBody += "
"+dataArray[i]['birthdate']+"";
tableBody += "
"+dataArray[i]['nationality']+"";
tableBody += "
";
}
tableBody += "
";
$("tbody#tableBody").remove();//删除已有表格
$("#tableHead").after(tableBody);
},
error:function (e) {
//隐藏load动画
hiddenLoad();
alert("错误！"+e.status);
},
complete:function () {
//完成以后隐藏load动画
hiddenLoad();
//实现鼠标悬停高亮+隔行显色
mouseover();
}
});
}
IDUserNameBirthdateNationality
#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%;
}
#loader {
position: absolute;
left: 50%;
top: 50%;
z-index: 1;
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);
}
}
#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..com/KeenLeung/archive/2013/03/10/2952752.html
实现鼠标移动表格行上，此行背景变色研究
https://blog..net/aspnet2002web/article/details/6024447
js实现表格隔行变色和鼠标移入高亮
https://blog..net/Q_004/article/details/77431097
表格隔行变色，并且鼠标移入高亮显示，鼠标移出显示原来的颜色
https://blog..net/xuan6251237011/article/details/37942103