El primer paso es crear un archivo jsp o html e introducir el complemento jQuery, de la siguiente manera:
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<meta charset="UTF-8">
<title>表格高亮显示案例</title>
<script style="text/javascript" src="../lib/jquery.min.js"></script>
<script style="text/javascript" src="../lib/gaoliang.js"></script>
<div id="tableId"></div>
</head>
<body>
</body>
</html>
Paso 2: cree un archivo js e introduzca el archivo js en el archivo anterior, como se indica arriba: luego escriba el código correspondiente en js para lograr el efecto de resaltar cada fila de la tabla.
$(function () {
var columnOneName=[];//定义存储第一列的内容的数组
var columnTwoName=[];//定义存储第二列的内容的数组
var flag=0;//表格高亮显示行的标志位
function getTableData() {//ajax请求获取数据
$.ajax({
type:"post",
async:true,
url:"url",//这是ajax请求用的URL
dataType:"json",//字符形式是json
success:function (data) {//如果查询成功，以data变量的形式返回
columnOneName=[];//每次查询之后将该数组清空
columnTwoName=[];//每次查询之后将该数组清空
for(var i=0;i<data.view1.records.length;i++){//循环将查处的数据push到对应的两个数组中
columnOneName.push(data.view1.records[i].columnonedata);
columnTwoName.push(data.view1.records[i].columntwodata);
}
tableContent();//push到数组之后，调用该函数，加载表格内容
},
error:function (errorMsg) {
alert("数据加载失败");
return '';
}
});
};
//加载表格内容
var table=null;
function tableContent() {//拼接table表格，最后追加到div中
table='<table border="1" style=""><tbody> '+//
'<tr>'+'<th style="text-align: center">第一列</th>'+
'<th style="text-align: center">第二列</th></tr>';
for (var i=0;i<columnOneName.length;i++){//循环高亮显示table的每一行
if(i==flag){
//此处的两个style就是高亮显示的背景颜色和字体颜色
table+='<tr style="background-color: #000000;color: red"><td style="">'+columnOneName[i]+'</td>'+
'<td style="">'+columnTwoName[i]+'</td></tr>'
}else{
table+='<tr style=""><td style="">'+columnOneName[i]+'</td>'+
'<td style="">'+columnTwoName[i]+'</td></tr>'
}
}
table+='</tboday></table>';
var divContent=document.getElementById('tableId');//获取显示表格的div
divContent.innerHTML=table;//追加table内容到div容器
if (flag<9){//此处看你表格有多少行，flag就小于多少，9只是我随便写的一个数字
flag++;
}else {
flag=0;//当循环结束之后，令flag==1，重新开始循环高亮显示
}
setTimeout(function () { getTableData();}, 5000);//延时五秒后执行getTableData()此函数
}
})
En este punto, básicamente hemos logrado el efecto de resaltar cíclicamente cada fila en la tabla. En cuanto a los datos, puede agregar algunos manualmente para probar. Si hay algo que no comprende, ¡no dude en preguntar!