Javascript 如何通过浏览器的“后退”按钮在单独的Div部分中编辑表格记录来处理后退_Javascript_Html

Javascript 如何通过浏览器的“后退”按钮在单独的Div部分中编辑表格记录来处理后退

javascript html

Javascript 如何通过浏览器的“后退”按钮在单独的Div部分中编辑表格记录来处理后退,javascript,html,Javascript,Html,我使用JavaScript（jQuery）编写了一个简单的数据库页面。在主视图中有一个包含数据的表（在一个div中），在另一个div中有一个编辑视图（在同一index.html文件中）。第二个div最初是隐藏的。单击记录后，它将打开，您可以在单击“保存”或“取消”后关闭它。它基本上是有效的。问题是，如果我在浏览器中单击“后退”按钮，我真的不知道该怎么办。现在，当我从编辑记录项中单击时，它会将我从整个页面中带回来。我希望它能把我带回到表视图，这样编辑div就会关闭/清除这个功能的好方法是什

我使用JavaScript（jQuery）编写了一个简单的数据库页面。在主视图中有一个包含数据的表（在一个div中），在另一个div中有一个编辑视图（在同一index.html文件中）。第二个div最初是隐藏的。单击记录后，它将打开，您可以在单击“保存”或“取消”后关闭它。它基本上是有效的。问题是，如果我在浏览器中单击“后退”按钮，我真的不知道该怎么办。现在，当我从编辑记录项中单击时，它会将我从整个页面中带回来。我希望它能把我带回到表视图，这样编辑div就会关闭/清除

这个功能的好方法是什么？下面是一个非常简单的页面来说明我的意思

<html>
  <head>
      <meta name="viewport" content="width=device-width"/>
      <title>Index</title>
      <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
      <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.19.0/jquery.validate.min.js"></script>
  </head>
<style>
  #EditDiv
  {
    background-color: blanchedalmond;
  }
  #DetailsDiv
  {
    background-color:burlywood;
    font-size: 30px;
    width: 50%;
  }
  #SaveButton
  {
    background-color:indianred;
    font-size: 30px;
    width: 100%;
  }

  .box{
        width: 100%;
        height: 100%;
        position: absolute;
        top: -80px; 
        left: 0;
        background-color: rgb(243, 229, 229);
        overflow:auto;
        border-style: solid;
        border-width: thin;
        border-color: lightsteelblue;
}


</style>

<body>
<div id="TableDiv">
    <table id="testtable" style="width:50%">
      <tr>
        <th>Firstname</th>
        <th>Lastname</th>
        <th>Age</th>
      </tr>
      <tr>
        <td>Jill</td>
        <td>Smith</td>
        <td>50</td>
      </tr>
      <tr>
        <td>Eve</td>
        <td>Jackson</td>
        <td>94</td>
      </tr>
      <tr>
        <td>Anna</td>
        <td>Thompson</td>
        <td>20</td>
      </tr>
    </table> 
</div>
<div id="DetailsDiv" class="box stack-top" >
  <p style="font-size: 30px; font-weight: bold;">
    Edit row
  </p>
  <button id="SaveButton" onclick="Save()" >SAVE</button>
  <div id="EditDiv"></div>
</div>
</body>
<script>
      $('#DetailsDiv').hide();

      $("#testtable tr").click(function() {
        $( "#EditDiv" ).empty();
        $( "#EditDiv" ).append( $(this).children("td").html());
        $('#DetailsDiv').show();   

        const state = { 'page_id': 1}
        const title = ''
        const url = 'index5.html#' + $(this).children("td")[0].textContent;
        history.pushState(state, title, url)
    });

    function Save()
    {
      $( "#EditDiv" ).empty();
      $('#DetailsDiv').hide();
    }
</script>
</html>


指数
#编辑部
{
背景颜色：白杏仁；
}
#详情iv
{
背景颜色：白肋木；
字体大小：30px；
宽度：50%；
}
#保存按钮
{
背景色：印度红；
字体大小：30px；
宽度：100%；
}
.盒子{
宽度：100%；
身高：100%；
位置：绝对位置；
顶部：-80px；
左：0；
背景色：rgb（243229229）；
溢出：自动；
边框样式：实心；
边界宽度：薄；
边框颜色：淡蓝色；
}
名字
姓氏
年龄
吉尔
史密斯
50
前夕
杰克逊
94
安娜
汤普森
20

编辑行

拯救
$（'#DetailsDiv'）.hide（）；
$（“#testtable tr”）。单击（函数（）{
$（“#EditDiv”）.empty（）；
$（“#EditDiv”）.append（$（this.children（“td”）.html（））；
$（'#DetailsDiv'）.show（）；
常量状态={'page_id'：1}
常量标题=“”
const url='index5.html#'+$（this）.children（“td”）[0].textContent；
history.pushState（状态、标题、url）
});
函数Save（）
{
$（“#EditDiv”）.empty（）；
$（'#DetailsDiv'）.hide（）；
}

这不是浏览器后退按钮的预期功能。“后退”按钮应保留为允许用户转到您之前的网页URL。阻止此功能对用户来说是一种糟糕的体验，应该避免

您可以在应用程序中实现“路由”。当用户单击“编辑”时，您可以使用将URL更改为

/page/Edit

，当用户保存时，将其更改回

/page/

。当用户单击后退按钮时，这将证明更改状态是正确的

但是，正确实施这一点超出了这个问题的范围。

谢谢。这绝对是我应该用的。我已经看过这个机制，但我不认为我真正理解如何使用它。我理解设置一个新的url，但是在我的示例中，您能告诉我应该通过单击“上一步”按钮来返回到表视图吗？我添加了一行：const state={'page_id'：1}const title=''const url='index5.html#'+$（this）.children（“td”）[0].textContent；pushState（state、title、url），但这显然只设置了正确的url。当我打开编辑时。