返回頁面上表格中的光標位置

Question

嗨，我為此感到掙扎。 我已經嘗試過在這里和其他地方發布的眾多解決方案中的許多解決方案，但是似乎無法獲得所需的功能。

我有一個相當簡單的動態網頁，它顯示列表結果。 對於頁面本身中可以更改的內容，我只有有限的自由度。 當選擇表中的鏈接之一時，將加載第二頁，這將對數據庫進行適當的更改，然后返回到第一頁。 我希望不僅在頁面本身上而且在滾動表中返回相同的位置。

<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>

我試圖適應此處給出的“ 刷新頁面並保持滾動位置”的示例，但最終陷入了混亂。 我也試過此頁上的第二個解決方案在相同的位置重新加載頁面。 這似乎影響滾動位置，但似乎不反映表格中的位置。

Answer 1

我終於能夠使用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 / ytpos）和頁面（x / yppos）的x和y滾動位置附加到url，然后可以在下一頁（如果是自引用的話，在同一頁面）上找到該URL。

$ytpos=$_GET['ytpos'];

從那里可以將其作為普通的php數組進行處理。

要將位置應用於頁面，我在表格后有以下腳本：

<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>

這會將表格和頁面滾動到相同的位置。

返回頁面上表格中的光標位置

問題描述

1 個解決方案

解決方案1
0 已采納 2017-11-30 16:11:54

返回頁面上表格中的光標位置

問題描述

1 個解決方案

解決方案1 0 已采納 2017-11-30 16:11:54

解決方案1
0 已采納 2017-11-30 16:11:54