求大神指点，列表自动定位

html

解决方案 »

  1.   

    <html><head></head>
    <body>
    <div   style="width:400px; height:150px; overflow:auto" id="dv">
    <table >
    <tr>    <td>1</td>    <td>1</td>    <td>1</td></tr>
    <tr>    <td>2</td>    <td>2</td>    <td>2</td></tr>
    <tr>    <td>3</td>    <td>3</td>    <td>3</td></tr>
    <tr>    <td>4</td>    <td>4</td>    <td>4</td></tr>
    <tr>    <td>5</td>    <td>5</td>    <td>5</td></tr>
    <tr>    <td>6</td>    <td>6</td>    <td>6</td></tr>
    <tr>    <td>7</td>    <td>7</td>    <td>7</td></tr>
    <tr>    <td>8</td>    <td>8</td>    <td>8</td></tr>
    <tr>    <td>9</td>    <td>9</td>    <td>9</td></tr>
    <tr>    <td>10</td>    <td>10</td>    <td>10</td></tr>
    <tr>    <td>11</td>    <td>11</td>    <td>11</td></tr>
    </table>
    </div>
    <script>
        var dv = document.getElementById('dv'), trs = dv.getElementsByTagName('tr'), timer, delay = 1000, index = 0
        , divH = dv.offsetHeight, h = 0;
        trs[index].style.backgroundColor = '#eeeeee';    dv.scrollTop = 0;
        for (var i = 0; i < trs.length; i++) {
            h += trs[i].offsetHeight;
            trs[i].h = h;
        }    timer = setInterval(function () {
            trs[index].style.backgroundColor = '#ffffff'; //如果要还原默认背景色取消注释这行
            index++;
            if (index >= trs.length) {//重新来，如果不重新开始自己注释分支1，启用分支2
                index = 0; dv.scrollTop = 0; //分支1）
                //clearInterval(timer); return//分支2）
            }
            if (trs[index].h > divH) dv.scrollTop = trs[index].h + trs[index].offsetHeight - divH;
            trs[index].style.backgroundColor = '#eeeeee';
        }, delay);
    </script>
    </body>
    </html>