您的位置：首页 > 其它

table表格循环高亮显示每一行

2018-01-12 09:53 435 查看

第一步，创建jsp或者html文件，并引入jQuery插件，如下：

<%@ 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="tableI
c4fa
d"></div>
</head>
<body>
</body>
</html>

第二步：创建js文件，并在上述文件中引入js文件，如上：然后再js中写入相应的代码，实现table每一行高亮显示的效果

$(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()此函数
}
})

到这里基本上就实现了表格中循环高亮显示每一行的效果，至于数据你们可以手动添加一些试试，如果有不明白的地方，欢迎追问！

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航