Return 到页面 table 内的光标位置

Question

嗨，我正在为此苦苦挣扎。我已经尝试了此处和其他地方发布的许多解决方案，但似乎无法获得我需要的功能。

我有一个相当简单的动态网页，可以显示表格结果。对于我可以在页面本身内更改的内容，我只有有限的自由。当 table 中的一个链接被选中时，第二个页面加载，这会在数据库中进行适当的更改，然后 returns 到第一页。我不仅在页面本身而且在滚动 table.

中都希望 return 到相同的位置

<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 but ended up with a huge mess. I also tried the second solution on this page Reload page in same position。这似乎确实影响了滚动位置，但似乎并未反映 table.

中的位置

Answer 1

我终于能够使用 JavaScript 做到这一点。

在这个例子中，我给了 table ID "maintable"。 table 中的每个 link 现在都有以下内容：

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

这会将 table (x/ytpos) 和页面 (x/yppos) 的 x 和 y 滚动位置附加到 url，然后可以在带有

的下一页（如果是自引用则为同一页）

$ytpos=$_GET['ytpos'];

从那里它可以作为一个普通的 php 数组来处理。

要将位置应用于页面，我在 table 之后有以下脚本：

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

这会将 table 和页面滚动到相同的位置。

Return 到页面 table 内的光标位置

Return to cursor position within table on page

html

javascript

php

scroll-position