How to save onclick function results

Question

i have an onclick function created in javascript in which when i click on a Table Row in my page it turns red. What can i do so when i 'll do a new search the specific Table Row remain red.

Here is a snip of my code:

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

Here is a FIDDLE.

how is your search... does it refresh the page... if so then you need to store the values either using cookies/localstorage — Arun P Johny, Mar 23 '15 at 12:38
I have only one Table Row because i am using a while loop to show the results in it. So i think there is a problem doing it this way (using id's). — Grigoris Papoutsis, Mar 23 '15 at 19:38

score 0 · Answer 1 · edited May 23 '17 at 12:33

You can use cookies and set the corresponding row red on refresh if the cookie tells that it was selected previously. Refer the following link:

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

score 0 · Answer 2 · 2015-04-02T08:00:31.800

Something like that:

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 (using local storage):

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

SCRIPT (using cookies):

     /* 
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";
                    }
                }    
           };

I think your code does not store the color after refreshing the page. Does it needs any libraries? — Grigoris Papoutsis, Mar 30 '15 at 18:59
You are right! Just fixed it. It's without any framework. Here the example (to simulate page refreshing, press on RUN): https://jsfiddle.net/xhgs0hb4/2/ — , Mar 31 '15 at 05:34
Thanks a lot, that was very helpful. However i would really like to learn the way with local storage if it' s possible because it's kinda mess in my head. — Grigoris Papoutsis, Apr 01 '15 at 19:03
Ok... The local storage is storing the values as key=>value data. Here is the example of your code with using of local storage: https://jsfiddle.net/5y2jwqk2/2/ — , Apr 02 '15 at 07:58

How to save onclick function results

2 Answers2