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

最新推荐文章于 2021-05-25 09:49:25 发布

Eshine、

最新推荐文章于 2021-05-25 09:49:25 发布

阅读量1.8k

点赞数

分类专栏： JavaScript jQuery ajax 文章标签： js中table的拼接方法 js中table的每一行循环高亮显示 js中延时加载

本文链接：https://blog.youkuaiyun.com/listener_life/article/details/79040695

版权

JavaScript 同时被 3 个专栏收录

7 篇文章

订阅专栏

jQuery

1 篇文章

订阅专栏

ajax

1 篇文章

订阅专栏

 
 第一步，创建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;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()此函数
    }
})

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