ページをリフレッシュした後、同じ表のセルをどのようにハイライト表示しますか？

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

あなたがOBの代わりに、グローバル変数の配列を使用した理由私が知っているreply.Mayてくれてありがとう！ jsfiddleでデモを見せていただければ幸いです。 – user1788736

ページをリフレッシュした後、同じ表のセルをどのようにハイライト表示しますか？

答えて

関連する問題