Question

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

Answer 1

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

页面刷新后如何保持相同的表格单元格？

1 个答案: