Comment conserver la même cellule de tableau en surbrillance après l'actualisation de la page?

J'ai une table html et quand les utilisateurs cliquent sur n'importe quelle cellule cette cellule est mise en évidence avec la couleur jaune! Cependant, si je rafraîchis la page, la cellule sélectionnée n'est plus surlignée en jaune! Quelqu'un pourrait-il me montrer comment re-mettre en évidence une cellule de tableau précédemment sélectionnée après l'actualisation en utilisant la méthode de stockage local. Merci d'avance.Comment conserver la même cellule de tableau en surbrillance après l'actualisation de la page?

<html> 
<head> 
<style> 
    .selected_link {background:yellow;} 

</style> 

<script> 

var myGlobalScrollPosition=0; 

function RestoreSelectedTableCell() 
{ 

ScrollPositionVariable = localStorage.getItem("ScrollPosition2"); 
window.scrollTo(0,ScrollPositionVariable); 

}; 

</script> 

<script language="javascript"> 
    function hide_selection(){ 
     var lnks = document.getElementsByTagName("A"); 
     for(i=0; i<lnks.length; i++){ 
      if (lnks[i].className == "selected_link"){ 
       lnks[i].className = ""; 
       break; 
      } 
     } 
    } 

    function selectLink(ob){ 
       //alert("value of ob:"+ob); 
     hide_selection(); 
     ob.className = "selected_link"; 
    } 
</script> 
<script> 
function MyFunction(var1,var2,var3) 
{ 
    alert("var1:"+var1+" var2:"+var2+" var3:"+var3); 


myGlobalScrollPosition = document.body.scrollTop; 

//saving scrollpostion on html5 localstroage 
localStorage.setItem("ScrollPosition2", myGlobalScrollPosition); 
}; 
</script> 
</head> 

<body onload="RestoreSelectedTableCell()"> 

<div id="myDiv" style="display: visiable;"> 

<table id="demoajax" style="display: visible;" class="inlineTable" border="1" cellspacing="0"> 
    <thead> 
    <tr> 
     <th>Item#</th> 
     <th>Logo</th> 
     <th>Title</th> 

    </tr> 
    </thead> 
    <tbody> 

    <tr id="1"> 
<td>1</td> 
<td><img src="./apple.png" height="42" width="42"></td> 
<td> 
<a id="fruits" href="javascript:MyFunction('fruits','2','./apple.png')" onclick="selectLink(this);">Apple 
</a><br><br> 
</td> 
</tr> 

<tr id="2"> 
<td>2</td> 
<td><img src="./mango.png" height="42" width="42"></td> 
<td> 
<a id="fruits" href="javascript:MyFunction('fruits','4','./mango.png')" onclick="selectLink(this);">Mango 
</a><br><br> 
</td> 
</tr> 

<tr id="3"> 
<td>3</td> 
<td><img src="./orange.png" height="42" width="42"></td> 
<td> 
<a id="fruits" href="javascript:MyFunction('fuits','7','./orange.png')" onclick="selectLink(this);">orange 
</a><br><br> 
</td> 
</tr> 
</tbody> 
</table> 

</div> 
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>test<br> 
</body> 

</html>

Source

2017-09-14 user1788736

votre code html

<div id="myDiv" style="display: visiable;"> 

    <table id="demoajax" style="display: visible;" class="inlineTable" border="1" cellspacing="0"> 
    <thead> 
     <tr> 
     <th>Item#</th> 
     <th>Logo</th> 
     <th>Title</th> 

     </tr> 
    </thead> 
    <tbody> 

     <tr id="1"> 
     <td>1</td> 
     <td><img src="./apple.png" height="42" width="42"></td> 
     <td> 
      <a id="one" href="javascript:MyFunction('fruits','2','./apple.png')" onclick="selectLink(this.id)">Apple 
</a> 
      <br> 
      <br> 
     </td> 
     </tr> 

     <tr id="2"> 
     <td>2</td> 
     <td><img src="./mango.png" height="42" width="42"></td> 
     <td> 
      <a id="two" href="javascript:MyFunction('fruits','4','./mango.png')" onclick="selectLink(this.id)">Mango 
</a> 
      <br> 
      <br> 
     </td> 
     </tr> 

     <tr id="3"> 
     <td>3</td> 
     <td><img src="./orange.png" height="42" width="42"></td> 
     <td> 
      <a id="three" href="javascript:MyFunction('fuits','7','./orange.png')" onclick="selectLink(this.id)">orange 
</a> 
      <br> 
      <br> 
     </td> 
     </tr> 
    </tbody> 
    </table> 

</div>

fichier javascript

var selected = []; 
storedSelected = []; 
$(function() { 
    if (localStorage.getItem("selected") != null) { 
    storedSelected = JSON.parse(localStorage.getItem("selected")); 
     selected = storedSelected; 
    storedSelected.forEach(function(ele) { 
     console.log(ele); 
     $('#' + ele).addClass("selected_link"); 
    }); 
    } 
}); 




var myGlobalScrollPosition = 0; 

function RestoreSelectedTableCell() { 

    ScrollPositionVariable = localStorage.getItem("ScrollPosition2"); 
    window.scrollTo(0, ScrollPositionVariable); 

}; 



function selectLink(ob) { 
    console.log(ob) 
    if (jQuery.inArray(ob, selected) !== -1) { 
    var index = selected.indexOf(ob); 
    if (index > -1) { 
     selected.splice(index, 1); 
    } 
    $('#' + ob).removeClass("selected_link"); 

    } else { 
    selected.push(ob); 
    $('#' + ob).addClass("selected_link"); 
    } 
    console.log(selected); 

    localStorage.setItem("selected", JSON.stringify(selected)); 
    console.log("storeage:" + localStorage.getItem("selected")); 
} 

function MyFunction(var1, var2, var3) { 
    alert("var1:" + var1 + " var2:" + var2 + " var3:" + var3); 


    myGlobalScrollPosition = document.body.scrollTop; 

    //saving scrollpostion on html5 localstroage 
    localStorage.setItem("ScrollPosition2", myGlobalScrollPosition); 
};

et see this code in Jsfiddel

Source

2017-09-14 17:13:14

Merci pour reply.May je sais pourquoi vous avez utilisé tableau pour ob au lieu de variable globale? J'apprécierais que vous me montriez une démo sur jsfiddle. – user1788736

Comment conserver la même cellule de tableau en surbrillance après l'actualisation de la page?

Répondre

Questions connexes