滾動到記錄

在下面的代碼的最後點擊位置，我已經在那裏我試圖讓網格結構/滾動到最後點擊記錄的位置後的Scroll to last clicked position按鈕點擊時重置選擇。滾動到記錄

任何建議將有所幫助。

$(function(){ 
 
var elPos; 
 
$('tr').on('click', function(){ 
 
    if(!$(this).hasClass('selected')){ 
 
\t \t $('tr').not(this).removeClass('selected'); 
 
    $(this).addClass('selected'); 
 
    } 
 
    elPos = Math.round($('.selected').position().top); 
 
    $('p').html('Last clicked element pos: ' + elPos); 
 
    $('p').hide(); 
 
}); 
 
$('#reset').on('click', function(){ 
 
\t $('tr').removeClass('selected'); 
 
    $('p').show(); 
 
    $('div').scrollTop(0); 
 
}); 
 
});

div{ 
 
    width:500px; 
 
    height:200px; 
 
    overflow-y:auto; 
 
} 
 
table, td{ 
 
    border:1px solid #ccc; 
 
} 
 
.selected{ 
 
    color:#fff; 
 
    background:#63aadc; 
 
} 
 
p{ 
 
    visibility:hidden; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div> 
 
<table border="1" style="width:100%;"> 
 
    <tr> 
 
    <td>1</td> 
 
    <td>2</td> 
 
    <td>1</td> 
 
    <td>2</td> 
 
    </tr> 
 
    <tr> 
 
    <td>1</td> 
 
    <td>2</td> 
 
    <td>1</td> 
 
    <td>2</td> 
 
    </tr> 
 
    <tr> 
 
    <td>1</td> 
 
    <td>2</td> 
 
    <td>1</td> 
 
    <td>2</td> 
 
    </tr> 
 
    <tr> 
 
    <td>1</td> 
 
    <td>2</td> 
 
    <td>1</td> 
 
    <td>2</td> 
 
    </tr> 
 
    <tr> 
 
    <td>1</td> 
 
    <td>2</td> 
 
    <td>1</td> 
 
    <td>2</td> 
 
    </tr> 
 
    <tr> 
 
    <td>1</td> 
 
    <td>2</td> 
 
    <td>1</td> 
 
    <td>2</td> 
 
    </tr> 
 
    <tr> 
 
    <td>1</td> 
 
    <td>2</td> 
 
    <td>1</td> 
 
    <td>2</td> 
 
    </tr> 
 
    <tr> 
 
    <td>1</td> 
 
    <td>2</td> 
 
    <td>1</td> 
 
    <td>2</td> 
 
    </tr> 
 
    <tr> 
 
    <td>1</td> 
 
    <td>2</td> 
 
    <td>1</td> 
 
    <td>2</td> 
 
    </tr> 
 
    <tr> 
 
    <td>1</td> 
 
    <td>2</td> 
 
    <td>1</td> 
 
    <td>2</td> 
 
    </tr> 
 
    <tr> 
 
    <td>1</td> 
 
    <td>2</td> 
 
    <td>1</td> 
 
    <td>2</td> 
 
    </tr> 
 
    <tr> 
 
    <td>1</td> 
 
    <td>2</td> 
 
    <td>1</td> 
 
    <td>2</td> 
 
    </tr> 
 
    <tr> 
 
    <td>1</td> 
 
    <td>2</td> 
 
    <td>1</td> 
 
    <td>2</td> 
 
    </tr> 
 
    <tr> 
 
    <td>1</td> 
 
    <td>2</td> 
 
    <td>1</td> 
 
    <td>2</td> 
 
    </tr> 
 
    <tr> 
 
    <td>1</td> 
 
    <td>2</td> 
 
    <td>1</td> 
 
    <td>2</td> 
 
    </tr> 
 
    <tr> 
 
    <td>1</td> 
 
    <td>2</td> 
 
    <td>1</td> 
 
    <td>2</td> 
 
    </tr> 
 
    <tr> 
 
    <td>1</td> 
 
    <td>2</td> 
 
    <td>1</td> 
 
    <td>2</td> 
 
    </tr> 
 
    <tr> 
 
    <td>1</td> 
 
    <td>2</td> 
 
    <td>1</td> 
 
    <td>2</td> 
 
    </tr> 
 
    <tr> 
 
    <td>1</td> 
 
    <td>2</td> 
 
    <td>1</td> 
 
    <td>2</td> 
 
    </tr> 
 
    <tr> 
 
    <td>1</td> 
 
    <td>2</td> 
 
    <td>1</td> 
 
    <td>2</td> 
 
    </tr> 
 
    <tr> 
 
    <td>1</td> 
 
    <td>2</td> 
 
    <td>1</td> 
 
    <td>2</td> 
 
    </tr> 
 
    <tr> 
 
    <td>1</td> 
 
    <td>2</td> 
 
    <td>1</td> 
 
    <td>2</td> 
 
    </tr> 
 
    <tr> 
 
    <td>1</td> 
 
    <td>2</td> 
 
    <td>1</td> 
 
    <td>2</td> 
 
    </tr> 
 
    <tr> 
 
    <td>1</td> 
 
    <td>2</td> 
 
    <td>1</td> 
 
    <td>2</td> 
 
    </tr> 
 
    <tr> 
 
    <td>1</td> 
 
    <td>2</td> 
 
    <td>1</td> 
 
    <td>2</td> 
 
    </tr> 
 
    <tr> 
 
    <td>1</td> 
 
    <td>2</td> 
 
    <td>1</td> 
 
    <td>2</td> 
 
    </tr> 
 
    <tr> 
 
    <td>1</td> 
 
    <td>2</td> 
 
    <td>1</td> 
 
    <td>2</td> 
 
    </tr> 
 
    <tr> 
 
    <td>1</td> 
 
    <td>2</td> 
 
    <td>1</td> 
 
    <td>2</td> 
 
    </tr> 
 
</table> 
 
</div> 
 
<br> 
 
<p>Last clicked element pos: </p> 
 
<button id="reset">Reset</button> 
 
<button>Scroll to last clicked position</button>

來源

2017-09-19 Hitesh Misro

你想幹什麼？行號或單元號？ – hasnayn

的重點是利用強大的jQuery選擇index和scrollTop（更新答案）：

HTML：替換最後一個部分：

<div id="container"> 
    <table border="1" style="width:100%;"> 
    <tr> 
     <td>1</td> 
     <td>2</td> 
     <td>1</td> 
     <td>2</td> 
    </tr> 
    <tr> 
     <td>1</td> 
     <td>2</td> 
     <td>1</td> 
     <td>2</td> 
    </tr> 
    <tr> 
     <td>1</td> 
     <td>2</td> 
     <td>1</td> 
     <td>2</td> 
    </tr> 
    <tr> 
     <td>1</td> 
     <td>2</td> 
     <td>1</td> 
     <td>2</td> 
    </tr> 
    <tr> 
     <td>1</td> 
     <td>2</td> 
     <td>1</td> 
     <td>2</td> 
    </tr> 
    <tr> 
     <td>1</td> 
     <td>2</td> 
     <td>1</td> 
     <td>2</td> 
    </tr> 
    <tr> 
     <td>1</td> 
     <td>2</td> 
     <td>1</td> 
     <td>2</td> 
    </tr> 
    <tr> 
     <td>1</td> 
     <td>2</td> 
     <td>1</td> 
     <td>2</td> 
    </tr> 
    <tr> 
     <td>1</td> 
     <td>2</td> 
     <td>1</td> 
     <td>2</td> 
    </tr> 
    <tr> 
     <td>1</td> 
     <td>2</td> 
     <td>1</td> 
     <td>2</td> 
    </tr> 
    <tr> 
     <td>1</td> 
     <td>2</td> 
     <td>1</td> 
     <td>2</td> 
    </tr> 
    <tr> 
     <td>1</td> 
     <td>2</td> 
     <td>1</td> 
     <td>2</td> 
    </tr> 
    <tr> 
     <td>1</td> 
     <td>2</td> 
     <td>1</td> 
     <td>2</td> 
    </tr> 
    <tr> 
     <td>1</td> 
     <td>2</td> 
     <td>1</td> 
     <td>2</td> 
    </tr> 
    <tr> 
     <td>1</td> 
     <td>2</td> 
     <td>1</td> 
     <td>2</td> 
    </tr> 
    <tr> 
     <td>1</td> 
     <td>2</td> 
     <td>1</td> 
     <td>2</td> 
    </tr> 
    <tr> 
     <td>1</td> 
     <td>2</td> 
     <td>1</td> 
     <td>2</td> 
    </tr> 
    <tr> 
     <td>1</td> 
     <td>2</td> 
     <td>1</td> 
     <td>2</td> 
    </tr> 
    <tr> 
     <td>1</td> 
     <td>2</td> 
     <td>1</td> 
     <td>2</td> 
    </tr> 
    <tr> 
     <td>1</td> 
     <td>2</td> 
     <td>1</td> 
     <td>2</td> 
    </tr> 
    <tr> 
     <td>1</td> 
     <td>2</td> 
     <td>1</td> 
     <td>2</td> 
    </tr> 
    <tr> 
     <td>1</td> 
     <td>2</td> 
     <td>1</td> 
     <td>2</td> 
    </tr> 
    <tr> 
     <td>1</td> 
     <td>2</td> 
     <td>1</td> 
     <td>2</td> 
    </tr> 
    <tr> 
     <td>1</td> 
     <td>2</td> 
     <td>1</td> 
     <td>2</td> 
    </tr> 
    <tr> 
     <td>1</td> 
     <td>2</td> 
     <td>1</td> 
     <td>2</td> 
    </tr> 
    <tr> 
     <td>1</td> 
     <td>2</td> 
     <td>1</td> 
     <td>2</td> 
    </tr> 
    <tr> 
     <td>1</td> 
     <td>2</td> 
     <td>1</td> 
     <td>2</td> 
    </tr> 
    <tr> 
     <td>1</td> 
     <td>2</td> 
     <td>1</td> 
     <td>2</td> 
    </tr> 
    </table> 
</div> 
<br> 
<p>Last clicked element pos: </p> 
<span id="topScroll"></span> 
<button id="reset">Reset</button> 
<button id="lastclicked">Scroll to last clicked position</button>

JS：

$(function() { 
    var elPos; 
    $('tr').on('click', function() { 
    if (!$(this).hasClass('selected')) { 
     $('tr').not(this).removeClass('selected'); 
     $(this).addClass('selected'); 
    } 
    elPos = Math.round($('.selected').position().top); 
    $('p').html('Last clicked element pos: ' + elPos); 
    $('p').hide(); 
    }); 
    $('#reset').on('click', function() { 
    var position = 0; 
    if ($('tr').hasClass('selected').toString() === 'true') { 
     $('tr').removeClass('selected'); 
     $('p').show(); 
     position = $('div').scrollTop(); 
     $('#topScroll').text(position); 
    } 
    $('#container').animate({ 
     scrollTop: 0 
    }, 'slow') 

    }); 
    $('#lastclicked').on('click', function() { 
    var position = $('#topScroll').text(); 
    if (position !== '') { 
     $('div#container').animate({ 
     scrollTop: position 
     }, 'slow') 
    } else { 
     $('div#container').animate({ 
     scrollTop: 0 
     }, 'slow') 
    } 


    }); 
});

CSS：

div { 
    width: 500px; 
    height: 200px; 
    overflow-y: auto; 
} 

table, 
td { 
    border: 1px solid #ccc; 
} 

.selected { 
    color: #fff; 
    background: #63aadc; 
} 

p { 
    display: none; 
} 

#topScroll { 
    display: none; 
}

來源

2017-09-19 13:48:40

現在你可以檢查我的問題了，滾動條的位置就是我所需要的。 –

我更新了我的答案以滿足您的新需求！你最初的解釋不符合你的最後一個;） –

@HiteshMisro，你試過這個嗎？對你起作用嗎？ –

回答

相關問題