如何保存onclick函数结果

Question

我在 javascript 中创建了一个 onclick 函数，当我单击页面中的表格行时，它会变成红色。当我重新搜索特定表格行时，我该怎么办？

这是我的代码片段：

<TABLE BORDER="1" style="border: solid 2px LightSkyBlue;">
    <TR `onclick="myFunction(this)"`> 
       <TH style="color: greenyellow;">IN</TH>
       <TH style="color: gold;">F_NAME</TH>
       <TH style="color: gold;">L_NAME</TH>
       <TH style="color: gold;">ARR_DATE</TH>
       <TH style="color: gold;">RET_DATE</TH>
       <TH style="color: gold;">PHONE</TH>
    </TR>
</TABLE>


<script>
window.myFunction = function(e) {
    e.parentNode.parentNode.style.background = "red";
};
</script>

这是FIDDLE。

Answer 1

如果 cookie 告诉它之前被选中，您可以使用 cookie 并在刷新时将相应的行设置为红色。 参考以下链接：

How do I set/unset cookie with jQuery?

$.cookie("test", 1, {
   expires : 10,           //expires in 10 days

   path    : '/',          //The value of the path attribute of the cookie 
                           //(default: path of page that created the cookie).

   domain  : 'jquery.com',  //The value of the domain attribute of the cookie
                           //(default: domain of page that created the cookie).

   secure  : true          //If set to true the secure attribute of the cookie
                           //will be set and the cookie transmission will
                           //require a secure protocol (defaults to false).
});

Answer 2

类似的东西：

HTML：

<TABLE BORDER="1" style="border: solid 2px LightSkyBlue;">  
<TR id="1" onclick="myFunction(1)">
               <TH style="color: greenyellow;">IN</TH>
               <TH style="color: gold;">F_NAME</TH>
               <TH style="color: gold;">L_NAME</TH>
               <TH style="color: gold;">ARR_DATE</TH>
               <TH style="color: gold;">RET_DATE</TH>
               <TH style="color: gold;">PHONE</TH>
</TR>
    <TR id="2" onclick="myFunction(2)">
               <TH style="color: greenyellow;">IN</TH>
               <TH style="color: gold;">F_NAME</TH>
               <TH style="color: gold;">L_NAME</TH>
               <TH style="color: gold;">ARR_DATE</TH>
               <TH style="color: gold;">RET_DATE</TH>
               <TH style="color: gold;">PHONE</TH>
</TR>
</TABLE>

SCRIPT（使用本地存储）：

function saveInLocalStorage(key, value) {
    localStorage.setItem(key,value);
}

function getFromLocalStorage(key) {
    return localStorage.getItem(key);
}

window.myFunction = function(id) {
    document.getElementById(id).style.background = "red";
        var old_ids = getFromLocalStorage('red'); 
    if(old_ids===null) {
        old_ids="";
    }
    if(old_ids.indexOf(id)<0) {
        old_ids +=","+id; 
         saveInLocalStorage('red', old_ids);        
    }
};

   window.onload = function() {       
         var ids = getFromLocalStorage('red');  
       if(ids!==null) {
         var vars = ids.split(",");
         for(i=0;i<vars.length;i++) {         
           if(!isNaN(parseFloat(vars[i])) && isFinite(vars[i])) {
              document.getElementById(vars[i]).style.background="red";
             }
          }
       }    
  };

脚本（使用 cookie）：

     /* 
functions setCookie and getCookie are from the: http://www.w3schools.com/js/js_cookies.asp
        */
        function setCookie(cname, cvalue, exdays) {
            var d = new Date();
            d.setTime(d.getTime() + (exdays*24*60*60*1000));
            var expires = "expires="+d.toUTCString();
            document.cookie = cname + "=" + cvalue + "; " + expires;
        }

        function getCookie(cname) {
            var name = cname + "=";
            var ca = document.cookie.split(';');
            for(var i=0; i<ca.length; i++) {
                var c = ca[i];
                while (c.charAt(0)==' ') c = c.substring(1);
                if (c.indexOf(name) == 0) return c.substring(name.length,c.length);
            }
            return "";
        }

        window.myFunction = function(id) {
            document.getElementById(id).style.background = "red";
            var old_cookie = getCookie('red');   
            if(old_cookie.indexOf(id)<0) {
                old_cookie +=","+id; 
                setCookie('red', old_cookie, 2);
            }
        };

        window.onload = function() {       
                var cookie = getCookie('red');         
                var vars = cookie.split(",");
                for(i=0;i<vars.length;i++) {
                    if(!isNaN(parseFloat(vars[i])) && isFinite(vars[i])) {
                        document.getElementById(vars[i]).style.background="red";
                    }
                }    
           };