頁面刷新後如何保持同一表格單元格高亮顯示？

我有HTML表格，當用戶點擊任何單元格的細胞突出顯示黃色！但是，如果我刷新頁面，選定的單元格不再以黃色突出顯示！任何人都可以告訴我如何在使用本地存儲方法刷新後重新突出顯示先前選定的表格單元格。提前致謝。頁面刷新後如何保持同一表格單元格高亮顯示？

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

來源

2017-09-14 user1788736

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>

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); 
};

和 see this code in Jsfiddel

來源

2017-09-14 17:13:14

感謝reply.May我知道你爲什麼使用數組OB，而不是全局變量？如果您在jsfiddle上向我展示演示，我將不勝感激。 – user1788736

頁面刷新後如何保持同一表格單元格高亮顯示？

回答

相關問題