ページの表内のカーソル位置に戻る

こんにちは、私はこれに苦労しています。私はここや他の場所に投稿された多数のソリューションの多くを試しましたが、必要な機能を得ることができません。ページの表内のカーソル位置に戻る

私は非常にシンプルな動的Webページを表示し、表形式の結果を表示します。私は、ページ自体の中で私が変えることができるものに限られた自由しかありません。テーブル内のリンクの1つが選択されると、データベースに適切な変更を加えた第2ページが読み込まれ、最初のページに戻ります。私はページ自体だけでなく、スクロールテーブル内でも同じ位置に戻ることを目指しています。

<html> 
<body> 
<table> 
<tr> 
    <th style="width: 50px;">heading 1</th> 
    <th style="width: 50px;">heading 2</th> 
    <th style="width: 50px;">heading 3</th> 
    <th style="width: 50px;">heading 4</th> 
    <th style="width: 50px;">heading 5</th> 
</tr> 
</table> 

<table style="overflow-y: scroll;" id="maintable"> 

<!-- while loop populates second table from db typically ~50 rows --> 

<tr> 
    <td style="width: 50px;"><a href="changeYN.php?link=1">Yes</a></td> 
    <td style="width: 50px;"><a href="changeYN.php?link=2">Yes</a></td> 
    <td style="width: 50px;"><a href="changeYN.php?link=3">Yes</a></td> 
    <td style="width: 50px;"><a href="changeYN.php?link=4">Yes</a></td> 
    <td style="width: 50px;"><a href="changeYN.php?link=5">Yes</a></td> 
</tr> 
<!-- end of while loop --> 
</table> 
</body> 
</html>

私はRefresh Page and Keep Scroll Positionここに挙げた例を適応しようとしていたが、巨大な混乱になってしまいました。私もこのページの2番目の解決策を試しましたReload page in same position。スクロール位置には影響するように見えますが、テーブル内の位置を反映していないようです。

出典

2017-11-27 CurrySoup

現代的な選択肢は、AJAXを使用してページを離れずにデータを送信することです。 – Andy

AJAXの周りで頭を上げようとしました。ですからに変更して、changeYN.phpを並べ替えてdbクエリを作成し、テーブルを再描画しますか？ – CurrySoup

最後にJavaScriptを使用してこれを行うことができました。

この例では、テーブルにID「maintable」を与えました。テーブル内の各リンクはここで、以下を有する：以下のように

<a href="example.php" onclick="tablepos(this.id);">

マイtablepos関数である：

function tablepos(clicked_id) { 
var elmnt = document.getElementById("maintable"); 
var ytpos = elmnt.scrollTop; 
var xtpos = elmnt.scrollLeft; 
var yppos = window.pageYOffset || document.documentElement.scrollTop; 
var xppos = window.pageXOffset || document.documentElement.scrollLeft; 
document.getElementById(clicked_id).href +="&xtpos=" + xtpos + "&ytpos=" + ytpos + "&xppos=" + xppos + "&yppos=" + yppos; 
}

これは、xとyスクロールテーブルの位置（X/ytpos）およびページを追加その後、（その自己参照元の場合は、同じ1）次のページでピックアップすることができるURLに（X/yppos）それは通常のPHPのARとして扱うことができ、そこから

$ytpos=$_GET['ytpos'];

とレイ。私はテーブルの後に次のスクリプトを持っているページにポジションを適用するに

：

<script> 
document.addEventListener("DOMContentLoaded", function(){ 
document.getElementById("maintable").scrollTop = <?php echo $ytpos; ?>; 
document.getElementById("maintable").scrollLeft = <?php echo $xtpos; ?>; 
document.documentElement.scrollTop = document.body.scrollTop = <?php echo $yppos; ?>; 
document.documentElement.scrollLeft = document.body.scrollLeft = <?php echo $xppos; ?>; 
}); 
</script>

これは、同じ位置にテーブルとページをスクロールします。

出典

2017-11-30 16:11:54 CurrySoup

ページの表内のカーソル位置に戻る

答えて

関連する問題