javascript - jQuery 滚动到选定的行

Question

我想滚动到选定的行，但它不起作用。我已经在 html 表格外的 div 中添加了滚动条。它快速滚动并且不随选定行移动。我用过的jquery版本是1.8.11。我不知道有什么问题。

$tables = $('#table1'); //gets the table
            limitcount = 2;
            mQ = []; //my queue
            timer = null;
            $tr = $('tr');
            //            alert("button clicked");
            $('#result').html(''); //demo code
            //   alert("00");
            $tr.removeClass('selected');
            //   alert("11");
            var t = 0, $tbltr;
            var t1 = [];
            $tables.each(function () {
                //   alert("trrrrr" + $tr);
                $tbltr = $(this).find('tr');
                //  alert("length" + $tbltr.length);
                t1[0] = 0;
                t1[1] = 2;
                for (var i = 0; i < $tbltr.length; i++) {
                    t1[i] = i;
                    // alert("i value" + t1[i]);
                    mQ.push($tbltr.get(t1[i]));
                }
            });
            // mQ.push($tbltr.get(t1[0]));
            //            mQ.push($tbltr.get(t1[1]));
            timer = setInterval(function () {
                if (mQ.length == 0) {
                    clearInterval(timer);
                    return false;
                }
                $tr.removeClass('selected');
                $(mQ.shift()).click().addClass('selected');
            }, 1000);

  $(document).delegate('tr', "click", function (e) {
           var _offset = $(this).offset();
          var _topoffset = _offset.top;
          var objDiv = document.getElementById("your_div");
          _topoffset = _topoffset - 200;
          objDiv.scrollTop = objDiv.scrollTop + _topoffset;
});


<div style="overflow:scroll;height:450px;width:450px;" id="your_div">
    <table>
    <thead><tr><th>column1</th><th>column2</th><th>column3</th><th>Speed</th></tr></thead>
     <tbody>
//fecthed records from database and filled in rows
            <tr ><td >item0</td><td >item1</td><td >item2</td><td>item3</td></tr>
            //all rows likewise
         </tbody>
    </table>
</div>

我已经根据我的代码更新了 fiddle。现在我想移动选定行的滚动条。

http://jsfiddle.net/Lavvunhj/11/

Answer 1

试试这个:- http://jsfiddle.net/adiioo7/Lavvunhj/12/

JS:-

$tables = $('#table1'); //gets the table
limitcount = 2;
mQ = []; //my queue
timer = null;
$tr = $('tr');
//            alert("button clicked");
$('#result').html(''); //demo code
//   alert("00");
$tr.removeClass('selected');
//   alert("11");
var t = 0,
    $tbltr;
var t1 = [];
$tables.find('tr').each(function () {
    mQ.push($(this));
});
// mQ.push($tbltr.get(t1[0]));
//            mQ.push($tbltr.get(t1[1]));
timer = setInterval(function () {
    if (mQ.length === 0) {
        clearInterval(timer);
        return false;
    }
    $tr.removeClass('selected');
    $(mQ.shift()).click().addClass('selected');
}, 1000);

$(document).delegate('tr', "click", function (e) {
    var _offset = $(this).offset();
    var _topoffset = _offset.top;
    var objDiv = document.getElementById("your_div");
    _topoffset = _topoffset - $(this).height();
    objDiv.scrollTop = objDiv.scrollTop + _topoffset;
});