返回页面上表格中的光标位置

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