table滚动

html页面


//滚动

var MyMarhq;

function tableScroll(tableid, hei, speed, len,MyMarhq) {

// alert(1);

    clearTimeout(MyMarhq);

$('t tbody').html('');

$('tableid tbody').empty();

$('.tableid_ tbody').empty();

    $('#' + tableid).parent().find('.tableid_').remove()

    $('#' + tableid).parent().prepend(

        '

' + $('#' + tableid + ' thead').html() + '
'

    ).css({

        'position': 'relative',

        'overflow': 'hidden',

        'height': hei + 'px'

    })

    $(".tableid_").find('th').each(function(i) {

        $(this).css('width', $('#' + tableid).find('th:eq(' + i + ')').width());

    });

    $(".tableid_").css({

        'position': 'absolute',

        'top': 0,

        'left': 0,

        'z-index': 9,

'width':"100%"

    })

    $('#' + tableid).css({

        'position': 'absolute',

        'top': 0,

        'left': 0,

        'z-index': 1

    })

    if ($('#' + tableid).find('tbody tr').length > len) {

        $('#' + tableid).find('tbody').html($('#' + tableid).find('tbody').html());

        $(".tableid_").css('top', 0);

        $('#' + tableid).css('top', 0);

        var tblTop = 0;

var speed = 10;

        var outerHeight = $('#' + tableid).find('tbody').find("tr").outerHeight();

        function Marqueehq() {

            if (tblTop <= -outerHeight * $('#' + tableid).find('tbody').find("tr").length) {

                tblTop = 0;

            } else {

                tblTop -= 1;

            }

            $('#' + tableid).css('margin-top', tblTop + 'px');

            clearTimeout(MyMarhq);

            MyMarhq = setTimeout(function() {

                Marqueehq()

            }, speed);

        }

        MyMarhq = setTimeout(Marqueehq, speed);

        $('#' + tableid).find('tbody').hover(function() {

            clearTimeout(MyMarhq);

        }, function() {

            clearTimeout(MyMarhq);

            if ($('#' + tableid).find('tbody tr').length > len) {

                MyMarhq = setTimeout(Marqueehq, speed);

            }

        })

    }

clearTimeout(tableid);

}


出现的bug

调用接口掉几次循环几次,给后端传一个值同时前端也想用,所以他会循环

//接口渲染数据

key 前端自己用

catname 给后端传值

function aa(key,catname) {

console.log(catname)

console.log(key)

console.log(catname)

// alert(1)

$.ajax({

url: ‘’,

type: "get",

dataType: 'json',

data: {

method: 'selScoreTem',

catname: catname

},

success: function(data) {

console.log('成功')

console.log(data)

if (data.info == null) {

return false;

}

// alert("44444")

if(key == "c1") {

for(var i=0;i

      //创建新的tr(newTr)

var newTr=document.createElement('tr');

//添加tr里的内容

newTr.innerHTML = ''+(i+1)+''+data.info[i].comnameall+''+data.info[i].jjscore+''

//把新的tr(newTr)加入到tbody中

$('#tableId1 tbody')[0].appendChild(newTr);

}

console.log(data.info)

tableScroll('tableId1', 300, 10, 10)

// $('#tableId1 tbody').html('')

}

else if(key == "c2") {

// alert(2);

for(var i=0;i

      //创建新的tr(newTr)

var newTr=document.createElement('tr');

//添加tr里的内容

newTr.innerHTML = ''+(i+1)+''+data.info[i].comnameall+''+data.info[i].jjscore+''

//把新的tr(newTr)加入到tbody中

$('#tableId2 tbody')[0].appendChild(newTr);

}

tableScroll('tableId2', 300, 10, 10)

}

else if (key == "c3") {

for(var i=0;i

      //创建新的tr(newTr)

var newTr=document.createElement('tr');

//添加tr里的内容

newTr.innerHTML = ''+(i+1)+''+data.info[i].comnameall+''+data.info[i].jjscore+''

//把新的tr(newTr)加入到tbody中

$('#tableId3 tbody')[0].appendChild(newTr);

}

tableScroll('tableId3', 300, 10, 10)

}

else if(key == "c4") {

for(var i=0;i

      //创建新的tr(newTr)

var newTr=document.createElement('tr');

//添加tr里的内容

newTr.innerHTML = ''+(i+1)+''+data.info[i].comnameall+''+data.info[i].jjscore+''

//把新的tr(newTr)加入到tbody中

$('#tableId4 tbody')[0].appendChild(newTr);

}

tableScroll('tableId4', 300, 10, 10)

}

else if (key == "c5") {

for(var i=0;i

      //创建新的tr(newTr)

var newTr=document.createElement('tr');

//添加tr里的内容

newTr.innerHTML = ''+(i+1)+''+data.info[i].comnameall+''+data.info[i].jjscore+''

//把新的tr(newTr)加入到tbody中

$('#tableId5 tbody')[0].appendChild(newTr);

}

tableScroll('tableId5', 300, 10, 10)

}

else if (key == "c6") {

for(var i=0;i

      //创建新的tr(newTr)

var newTr=document.createElement('tr');

//添加tr里的内容

newTr.innerHTML = ''+(i+1)+''+data.info[i].comnameall+''+data.info[i].jjscore+''

//把新的tr(newTr)加入到tbody中

$('#tableId6 tbody')[0].appendChild(newTr);

}

tableScroll('tableId6', 300, 10, 10)

}

else if (key == "c7") {

for(var i=0;i

      //创建新的tr(newTr)

var newTr=document.createElement('tr');

//添加tr里的内容

newTr.innerHTML = ''+(i+1)+''+data.info[i].comnameall+''+data.info[i].jjscore+''

//把新的tr(newTr)加入到tbody中

$('#tableId7 tbody')[0].appendChild(newTr);

}

tableScroll('tableId7', 300, 10, 10)

}

else if (key == "c8") {

for(var i=0;i

      //创建新的tr(newTr)

var newTr=document.createElement('tr');

//添加tr里的内容

newTr.innerHTML = ''+(i+1)+''+data.info[i].comnameall+''+data.info[i].jjscore+''

//把新的tr(newTr)加入到tbody中

$('#tableId8 tbody')[0].appendChild(newTr);

}

tableScroll('tableId8', 300, 10, 10)

}

else if (key == "c9") {

for(var i=0;i

      //创建新的tr(newTr)

var newTr=document.createElement('tr');

//添加tr里的内容

newTr.innerHTML = ''+(i+1)+''+data.info[i].comnameall+''+data.info[i].jjscore+''

//把新的tr(newTr)加入到tbody中

$('#tableId9 tbody')[0].appendChild(newTr);

}

tableScroll('tableId9', 300, 10, 10)

}

else if (key == "c10") {

for(var i=0;i

      //创建新的tr(newTr)

var newTr=document.createElement('tr');

//添加tr里的内容

newTr.innerHTML = ''+(i+1)+''+data.info[i].comnameall+''+data.info[i].jjscore+''

//把新的tr(newTr)加入到tbody中

$('#tableId10 tbody')[0].appendChild(newTr);

}

tableScroll('tableId10', 300, 10, 10)

}

else if (key == "c11") {

for(var i=0;i

      //创建新的tr(newTr)

var newTr=document.createElement('tr');

//添加tr里的内容

newTr.innerHTML = ''+(i+1)+''+data.info[i].comnameall+''+data.info[i].jjscore+''

//把新的tr(newTr)加入到tbody中

$('#tableId11 tbody')[0].appendChild(newTr);

}

tableScroll('tableId11', 300, 10, 10)

}

else if (key == "c12") {

for(var i=0;i

      //创建新的tr(newTr)

var newTr=document.createElement('tr');

//添加tr里的内容

newTr.innerHTML = ''+(i+1)+''+data.info[i].comnameall+''+data.info[i].jjscore+''

//把新的tr(newTr)加入到tbody中

$('#tableId12 tbody')[0].appendChild(newTr);

}

tableScroll('tableId12', 300, 10, 10)

}

},

error: function(arg) {

console.log('error失败')

console.log(arg)

}

})

}

var c1 = $('#c_1').html()

var c2 = $('#c_2').html()

var c3 = $('#c_3').html()

var c4 = $('#c_4').html()

var c5 = $('#c_5').html()

var c6 = $('#c_6').html()

var c7 = $('#c_7').html()

var c8 = $('#c_8').html()

var c9 = $('#c_9').html()

var c10 = $('#c_10').html()

var c11 = $('#c_11').html()

var c12 = $('#c_12').html()

console.log(c1)

console.log("m")

aa("c1",c1)

aa("c2",c2)

aa("c3",c3)

aa("c4",c4)

aa("c5",c5)

aa("c6",c6)

aa("c7",c7)

aa("c8",c8)

aa("c9",c9)

aa("c10",c10)

aa("c11",c11)

aa("c12",c12)

你可能感兴趣的:(table滚动)