title: How to return to the starting position in a dynamically rebuilt table after having followed a link from it?
body: <p>I rebuild a table (tbody) from the local storage. When it is necessary, I rebuild the <code>&lt;a&gt;</code> tag to get a link to an image. Contrary to what happen normally, when returning from the linked document or image to the calling document containing the rebuilt table, the cursor position nor the scrollbar position is retained, and the table is re-positioned at the beginning (row 0, col 0). I would like that the user would not have to scroll again to find it starting position (with the link) in the table.</p>
  
  <p>The problem is simple to explain and I already did it. By clicking to expand a small view of a table in order to get a full view of it on a new page, I have to dynamically rebuild this table from information in the localstorage: firstly call the function storeLocOeuvresTbl() in the origin page; secondly, the function getInventOeuvresTblFromStoreLoc() in the destination page. This can be done by clicking on the link  according to the code here : <p>Le contenu de cette table peut être trié en cliquant sur les entêtes de colonnes. <br></p>
  
  <p>Veuillez suivre ce lien 
  Expand 
  pour agrandir la table sur une page séparée.<br></p>. </p>
  
  <p>If I follow a link from a cell in the built table in the destination page and return to this page from any other document/page accessed through this link, the cursor and scrollbar positions are lost.  I suppose having to specify some property/attribute. </p>
  
  <p>Which property/attribute do I have to specify for a dynamically built table so that the table from which I followed the link, does not move to the initial pos (0,0) when I return from this link. If I have to specify a property to keep the position, at which level? Div, table contained in the div, tbody?</p>
  
  <p>Whit a dynamically built table, the normal behavior is perturbed.
  Here is a link to a test page simplifying this problem:</p>
  
  <p><a href="http://www.danielpisters.be/testTable.html" rel="nofollow noreferrer">http://www.danielpisters.be/testTable.html</a></p>
  
  <p>Click  bellow the table and you get a full view of the table in 
  <a href="http://www.danielpisters.be/testExpandTestTable.html" rel="nofollow noreferrer">http://www.danielpisters.be/testExpandTestTable.html</a></p>
  
  <p>Move right to the column header "tLink" (all the others are "Foo", "Bar"). Then move down in the column until you reach a cell with a link. Click on it and you will see an image on another page. Returning from it, the position on the cell containing the link is lost, becoming 0,0.</p>
  
  <pre><code>// Build the table from the origin document
  
  &lt;script type="text/javascript"&gt;
  
  function storeLocOeuvresTbl() 
  {  
  
    var oTable = document.getElementById('myOeuvresTable');
    var s = "";
    var stopAlert = true;
  
    if (oTable == null) // TJC: Invalid ID, ignore it
    {
        alert("myOeuvresTable not found!");
        return "";
    }
    var versIE = isIE();
  
    var aTBODY = oTable.getElementsByTagName("tbody");
  
    localStorage.setItem("myOeuvresTableTBlen", aTBODY.length);
  
    // set the CSS class for each one of the TR tags 
    for (var i = 0; i &lt; aTBODY.length; i++) 
    {
  
        // get an array of all the TR tags in the TBODY
        // TJC: It's actually a NodeList, but you can largely
        // treat it as an array
      var aTR = aTBODY[i].getElementsByTagName("tr");
  
      localStorage.setItem("myOeuvresTableTB" + i + "len", aTR.length);
  
      for (var j = 0; j &lt; aTR.length; j++) 
      {  
  
        var aTD = aTR[j].getElementsByTagName("td");
  
        localStorage.setItem("myOeuvresTableTB" + i + "TR" + j + "len", aTD.length);
  
        var aTDlen = parseInt(localStorage.getItem("myOeuvresTableTB" + i + "TR" + j + "len"));
  
        for (var k = 0; k &lt; aTD.length; k++) 
        {  
  
          s = s + aTD[k].id + ": " + aTD[k].innerHTML + "|";                    
  
          var tdId = "myOeuvresTableTB" + i + "TR" + j + "TD" + k;
  
          var innerHTML = "";
  
          if (aTD[k].innerHTML.length &gt; 0)
          {
              innerHTML = aTD[k].innerHTML;
          }
          else
          {
              innerHTML = " ";
          }
  
          localStorage.setItem(tdId, innerHTML);
  
          innerHTML = localStorage.getItem(tdId);
  
          if (stopAlert == false &amp;&amp; (versIE != false) &amp;&amp; (versIE &lt; 9))
          {
  
            alert("innerHTML get: " + innerHTML);
  
            if (window.confirm("Stop Alert?")) 
            {
              stopAlert = true;
            }
          }
  
        }
  
        s = s +  "\n";
  
      }
  
    } 
  
    return s;
  
  }
  </code></pre>
  
  <p> </p>
  
  <pre><code>// Rebuild onLoad of the destination document
  
  &lt;script type="text/javascript"&gt;
  
    function getInventOeuvresTblFromStoreLoc() 
    {  
  
      var tbl = document.getElementById('myOeuvresTable');
  
      var s = "";
      var tdId = "";
      var innerHTML = "";
      var aTBODYlen = 0;
      var aTRlen = 0;
      var aTDlen = 0;
  
      var stopAlert = true;
  
      var arrEvent = new Array("onMouseOver", "onMouseOut", "onClick", "onDbleClick", "onMouseUp", "onMouseDown", "onFocus", "onBlur");
  
      var DATE_RE = /^(\d\d?)[\/\.-](\d\d?)[\/\.-]((\d\d)?\d\d)$/;
  
      if (tbl == null) // TJC: Invalid ID, ignore it
      {
          alert("myOeuvresTable not found!");
          return "";
      }
  
      var versIE = isIE();
  
      aTBODYlen = parseInt(localStorage.getItem("myOeuvresTableTBlen"));
  
      // set the CSS class for each one of the TR tags 
      for (var i = 0; i &lt; aTBODYlen; i++) 
      {
          // get an array of all the TR tags in the TBODY
          // TJC: It's actually a NodeList, but you can largely
          // treat it as an array
  
        var tblBody = tbl.tBodies.item(i);
  
        aTRlen = parseInt(localStorage.getItem("myOeuvresTableTB" + i + "len"));
  
        for (var j = 0; j &lt; aTRlen; j++) 
        { 
  
          var row = document.createElement("tr");
  
          aTDlen = parseInt(localStorage.getItem("myOeuvresTableTB" + i + "TR" + j + "len"));
  
          for (var k = 0; k &lt; aTDlen; k++) 
          {  
  
            var cell = document.createElement("td");
  
            tdId = "myOeuvresTableTB" + i + "TR" + j + "TD" + k;
  
            innerHTML = localStorage.getItem(tdId);
  
            if (innerHTML.substr(0, 7).toLowerCase() == "&lt;a href")
            {
              var link = document.createElement("a");
  
              var indDblQuote1 = innerHTML.indexOf('"');
              var indDblQuote2 = innerHTML.indexOf('"', indDblQuote1 + 1);
  
              var indOf1 = innerHTML.indexOf("&gt;");
              var indOf2 = innerHTML.toLowerCase().indexOf("&lt;/a&gt;");
  
              var cellLink = innerHTML.substring(indDblQuote1 + 1, indDblQuote2);
              var cellText = innerHTML.substring(indOf1 + 1, indOf2);
  
              if (stopAlert == false &amp;&amp; (versIE != false) &amp;&amp; (versIE &lt; 9))
              {
                var s = "innetHTML: " + innerHTML + "; " + "cellLink: " + cellLink + "; " + "cellText: " + cellText;
                alert(s);
  
                if (window.confirm("Stop Alert?")) 
                {
                    stopAlert = true;
                }
              } 
  
              link.setAttribute('href', cellLink);        
              link.appendChild(document.createTextNode(cellText));
  
              cell.appendChild(link);   
  
            }
            else
            {
              var cellText = document.createTextNode(innerHTML);
  
              cell.appendChild(cellText);
  
            }
  
            row.appendChild(cell);
  
            s = s + tdId + ": " + innerHTML + "|";
  
          }
  
          tblBody.appendChild(row);
  
          s = s +  "\n";
  
        }
  
        tbl.appendChild(tblBody);
  
      }   
  
      return s;
  
    }
  
  &lt;/script&gt;
  </code></pre>