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

第一步,创建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="tableId">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;irecords.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=' '+//
                ''+''+
                '';
        for (var i=0;i<columnOneName.length;i++){//循环高亮显示table的每一行
            if(i==flag){
                //此处的两个style就是高亮显示的背景颜色和字体颜色
                table+=''+
                        ''
            }else{
                table+=''+
                    ''
            }
        }
        table+='
第一列第二列
'+columnOneName[i]+''+columnTwoName[i]+'
'+columnOneName[i]+''+columnTwoName[i]+'
'
; 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()此函数 } })
到这里基本上就实现了表格中循环高亮显示每一行的效果,至于数据你们可以手动添加一些试试,如果有不明白的地方,欢迎追问!

你可能感兴趣的:(JavaScript,jQuery,ajax,js中table的拼接方法,js中延时加载)