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

Question

Hi I am struggling with this. 嗨，我为此感到挣扎。 I have tried many of the numerous solutions posted here and elsewhere but cannot seem to get the functionality I need. 我已经尝试过在这里和其他地方发布的众多解决方案中的许多解决方案，但是似乎无法获得所需的功能。

I have a fairly simple dynamic webpage which displays tabulated results. 我有一个相当简单的动态网页，它显示列表结果。 I only have a limited amount of freedom over what I can change within the page itself. 对于页面本身中可以更改的内容，我只有有限的自由度。 When one of the links within the table is selected a second page loads which makes the appropriate changes in the database then returns to the first page. 当选择表中的链接之一时，将加载第二页，这将对数据库进行适当的更改，然后返回到第一页。 I am looking to return to the same position not only on the page itself but also within the scrolling table. 我希望不仅在页面本身上而且在滚动表中返回相同的位置。

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

I have tried to adapt the example given here 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 . 我也试过此页上的第二个解决方案在相同的位置重新加载页面。 Which does seem to affect the scroll position but doesn't seem to reflect the position in the table. 这似乎影响滚动位置，但似乎不反映表格中的位置。

Answer 1

I was finally able to do this using JavaScript. 我终于能够使用JavaScript做到这一点。

In this example I have given the table the id "maintable". 在此示例中，我为该表指定了ID“ maintable”。 Each link within the table now has the following: 现在，表格中的每个链接都具有以下内容：

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

My tablepos function is as follows: 我的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;
}

This appends the x and y scroll positions for the table (x/ytpos) and page (x/yppos) to the url which can then be picked up on the next page (or the same one if its self refering) with a 这会将表格（x / ytpos）和页面（x / yppos）的x和y滚动位置附加到url，然后可以在下一页（如果是自引用的话，在同一页面）上找到该URL。

$ytpos=$_GET['ytpos'];

From there it can be handled as a normal php array. 从那里可以将其作为普通的php数组进行处理。

To apply the positions to the page I have the following script after the 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>

This scrolls the table and page to the same positions. 这会将表格和页面滚动到相同的位置。

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

问题描述

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