您的位置:首页 > 编程学习 > > 正文

jquery 增加表格(jquery实现表格无缝滚动)

更多 时间:2021-10-16 00:50:23 类别:编程学习 浏览量:779

jquery 增加表格

jquery实现表格无缝滚动

本文实例为大家分享了jquery实现表格无缝滚动的具体代码,供大家参考,具体内容如下

css部分我是用的弹性布局

  • *{
                margin:0;
                padding:0;
            }
            ul,li{
                list-style:none;
            }
            .tableBox{
                width:500px;
                height:520px;
                background:#e8e8e8;
                margin:0 auto;
                overflow:hidden;
            }
            .slide-title{
                height:2.5rem;
                line-height:2.5rem;
                display:flex;
                background:#223e80;
                color:#fff;
                text-align:center;
            }
            .slide-title span{
                flex:1;
            }
            .slide-list li{
                line-height:1.875rem;
                height:1.875rem;
                display:flex;
            }
            .slide-list li span{
                flex:1;
                text-align:center;
            }
            .slide-list li.odd{
                background:rgba(0,0,0,.3)
            }
    
  • 结构部分

  • <li class="tableBox">
        <li class="slide-title">
            <span>title1</span>
            <span>title2</span>
            <span>title3</span>
        </li>
        <li class="slide-container">
            <ul class="slide-list js-slide-list">
                <li class="odd"><span>item1</span><span>item1</span><span>item1</span></li>
                <li class="even"><span>item2</span><span>item2</span><span>item2</span></li>
                <li class="odd"><span>item3</span><span>item3</span><span>item3</span></li>
                <li class="even"><span>item4</span><span>item2</span><span>item2</span></li>
                <li class="odd"><span>item5</span><span>item3</span><span>item3</span></li>
                <li class="even"><span>item6</span><span>item2</span><span>item2</span></li>
                <li class="odd"><span>item7</span><span>item3</span><span>item3</span></li>
                <li class="even"><span>item8</span><span>item2</span><span>item2</span></li>
                <li class="odd"><span>item9</span><span>item3</span><span>item3</span></li>
                <li class="even"><span>item10</span><span>item2</span><span>item2</span></li>
                <li class="odd"><span>item11</span><span>item3</span><span>item3</span></li>
                <li class="even"><span>item12</span><span>item2</span><span>item2</span></li>
                <li class="odd"><span>item13</span><span>item3</span><span>item3</span></li>
                <li class="even"><span>item14</span><span>item2</span><span>item2</span></li>
                <li class="odd"><span>item15</span><span>item3</span><span>item3</span></li>
                <li class="even"><span>item16</span><span>item2</span><span>item2</span></li>
            </ul>
        </li>
    </li>
    
  • 最后就是关键部分,js部分

    鼠标滑过时清除定时器的写法

  • $(function(){
        //鼠标滑过时清除定时器
        $(".slide-list").hover(function(){
            clearInterval(scrollTimer);
        },function(){
            scrollTimer=setInterval(function (){
                autoScroll(".slide-list")
            },2000);
        });
     
     
        function autoScroll(obj){
                var tableUl = $(obj);
                var first = tableUl.find('li:first');
                var height = first.height();
                first.animate({
                    height:0
                },500,function(){
                    first.css('height',height).appendTo(tableUl);
                })
        }
       var scrollTimer = setInterval(function(){
            autoScroll(".slide-list")
        },2000)
    })
    
  • 2、鼠标滑过时不清除定时器

  • $(function(){
        
        
        function autoScroll(obj){
                var tableUl = $(obj);
                var first = tableUl.find('li:first');
                var height = first.height();
                first.animate({
                    height:0
                },500,function(){
                    first.css('height',height).appendTo(tableUl);
                })
        }
       setInterval(function(){
            autoScroll(".slide-list")
        },2000)
    })
    
  • 实现的效果:

    jquery 增加表格(jquery实现表格无缝滚动)

    接口轮询调用的时候踩了一个坑,如果换成接口调用,一定要记得加上有没有定时器的判断

  • if(timer != null) {
        clearInterval(timer);
    }
    
  • 完整的代码如下

  • $(function(){
     
     
    var allUrl = "http://localhost:8899/tv/alldata";
     
    renderPage ();
     
     var timer = setInterval(function(){
        renderPage ()
    },5000);
    if(timer != null) {
        clearInterval(timer);
    }
     
     
    function renderPage () {
        console.log(111);
        $.ajax({
            url:allUrl,
            async:true,
            success:function(result){
              console.log(result);
              if(result.success === true){
                  console.log('数据',result.data);
                  var niujuOneData = result.data.counts[0].tvmTvToolUsageCount;
                  var niujuTwoData = result.data.counts[1].tvmTvToolUsageCount;
                  var niujuThreeData = result.data.counts[2].tvmTvToolUsageCount;
                  var niujuFourData = result.data.counts[3].tvmTvToolUsageCount;
                  var recordTableData = result.data.history;
                  var useTableOneData = result.data.usage.needCheckTools;
                  var useTableTwoData = result.data.usage.expireCheckTools;
                  var useTableThreeData = result.data.usage.usingTools;
                  console.log('数据1',niujuOneData)
     
                  renderNiuju ('#banshouOne','#otherOne','#totalOne',niujuOneData);
                  renderNiuju ('#banshouTwo','#otherTwo','#totalTwo',niujuTwoData);
                  renderNiuju ('#banshouThree','#otherThree','#totalThree',niujuThreeData);
                  renderNiuju ('#banshouFour','#otherFour','#totalFour',niujuFourData);
                  renderRecordTable ('#tvTableFour',recordTableData);
                  renderUseStateTable ('#tvTableOne',useTableOneData);
                  renderUseStateTable ('#tvTableTwo',useTableTwoData);
                  renderUseStateTable ('#tvTableThree',useTableThreeData);
              }
            }
        });
    };
    /**
     * 扭矩间数据渲染函数
     */
    function renderNiuju (obj1,obj2,obj3,tableData) {
        var niujuWrenchString = '<li class="tq-niuju-title-item blue">'+tableData.torqueToolTotalCount+'</li>' +
            '<li class="tq-niuju-title-item purple">'+tableData.torqueToolUsingCount+'</li>' +
            '<li class="tq-niuju-title-item green">'+tableData.torqueToolAvailableCount+'</li>' +
            '<li class="tq-niuju-title-item red">'+tableData.torqueToolNeedCheckCount+'</li>'
        var orderToolString = '<li class="tq-niuju-title-item blue">'+tableData.otherToolTotalCount+'</li>' +
            '<li class="tq-niuju-title-item purple">'+tableData.otherToolUsingCount+'</li>' +
            '<li class="tq-niuju-title-item green">'+tableData.otherToolAvailableCount+'</li>' +
            '<li class="tq-niuju-title-item red">'+tableData.otherToolNeedCheckCount+'</li>'
        var toolTotalString = '<li class="tq-niuju-title-item blue">'+tableData.totalToolCount+'</li>' +
            '<li class="tq-niuju-title-item purple">'+tableData.totalToolUsingCount+'</li>' +
            '<li class="tq-niuju-title-item green">'+tableData.totalToolAvailableCount+'</li>' +
            '<li class="tq-niuju-title-item red">'+tableData.totalToolNeedCheckCount+'</li>'
     
        $(obj1).html(niujuWrenchString)
        $(obj2).html(orderToolString)
        $(obj3).html(toolTotalString)
     
    }
     
    /**
     *操作记录表格渲染函数
     */
    function renderRecordTable (obj,tableData){
        var tableString = '';
        $.each(tableData,function(index,value){
            if(index % 2 == 0){
                tableString += ' <li class="odd">'+
                    '<li class="tq-des">'+value.content+'</li>'+
                    '<li class="tq-time">'+value.createTime+'</li>'+
                    '</li>'
            }else{
                tableString +=  ' <li class="even">'+
                    '<li class="tq-des">'+value.content+'</li>'+
                    '<li class="tq-time">'+value.createTime+'</li>'+
                    '</li>'
            }
        });
        $(obj).empty();
        $(obj).html(tableString);
    }
     
    function renderUseStateTable (obj,tableData){
        var tableString = '';
     
        $.each(tableData,function(index,value){
            if(index % 2 == 0){
                tableString += '<li class="odd">'+
                    '<span>'+value.totalPositionEncoding+'</span><span>'+value.toolCode+'</span>'+
                    '</li>'
            }else{
                tableString +=  '<li class="even">'+
                    '<span>'+value.totalPositionEncoding+'</span><span>'+value.toolCode+'</span>'+
                    '</li>'
            }
        })
     
        $(obj).html(tableString);
     
    }
     
    setInterval(function(){
        autoScroll("#tvTableOne")
        autoScroll("#tvTableTwo")
        autoScroll("#tvTableThree")
        autoScroll("#tvTableFour")
    },2000)
     
    function autoScroll(obj){
        var tableUl = $(obj);
        var first = tableUl.find('li:first');
        var height = first.height();
        first.animate({
            height:0
        },500,function(){
            first.css('height',height).appendTo(tableUl);
        })
    }
     
     
    });
    
  • 以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持开心学习网。

    标签:jquery 表格 滚动