Jak obsłużyć powrót z edycji rekordu tabeli w osobnym Divie to widoku tabeli poprzez przycisk wstecz w przeglądarce

0

Napisałem prostą stronę bazodanową z wykorzystaniem JavaScript (jQuery)
Działa to tak, że w widoku głównym mam tabelę z danymi (w jednym divie), a w drugim divie mam widok edycji rekordu po kliknięciu (w osobnym divie, ale w tym samym pliku index.html).
Ten drugi div jest na początku ukrywany. Po kliknięciu w rekord otwiera się i można go zamknąć po kliknięciu przycisk "Zapisz" lub "Anuluj". I to w zasadzie działa.
Problem w tym, że w ogóle nie pomyślałem co w przypadku kliknięcia przycisku wstecz w przeglądarce. W tej chwili po kliknięciu z pozycji edycji rekordu, cofa mnie w ogóle z całej strony. a chciałbym, żeby po prostu cofnęło mnie do widoku tabeli, żeby div z edycją się zamknął/wyczyścił.

Czy mógłbym prosić o pomoc jakie jest dobre podejście w takiej funkcjonalności? Poniżej bardzo uproszczona strona, żeby zobrazować o co mi chodzi.

<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%;
  }
</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" >
  <p style="font-size: 30px; font-weight: bold;">
    Edit row
  </p>
  <div id="EditDiv"></div>
</div>
</body>
<script>
      $('#DetailsDiv').hide();

      $("#testtable tr").click(function() {
        $( "#EditDiv" ).empty();
        $( "#EditDiv" ).append( $(this).children("td").html());
        $('#DetailsDiv').show();   
    });
</script>
</html>
1

Mieszam zwykły Javascript z jQuery, ale tego drugiego nie używam. Coś w rodzaju jak poniżej:

document.addEventListener( 'DOMContentLoaded', () => {
    $('#DetailsDiv').hide();
    $("#testtable tr").click( () => {
        $( "#EditDiv" ).empty();
        $( "#EditDiv" ).append( $(this).children("td").html());
        $('#DetailsDiv').show();
        location.hash = "#DetailsDiv";
    });
});
window.addEventListener( "hashchange", () => {
    if( location.hash === "" )
        $('#DetailsDiv').hide();
});
0

@overcq: Mam jeszcze jedno pytanie. Wszystko działa dobrze, oprócz tego, że z jakiegoś powodu div z edycją nie pojawia się w tej pozycji co wcześniej (z odpowiednim marginesem od góry).
Tak jakby część stylów dla niego nie działa. Czy wiesz może o co może chodzić? Mówię tu nie o tym przykładzie, który wkleiłem, tylko moim projekcie. Jak trzeba to spróbuję "okroić go"
i wkleić kod

1 użytkowników online, w tym zalogowanych: 0, gości: 1