Question

I’ve got this piece of code, what it does is saving a value using jstorage.

I would like to make saved value clickable – I intend to store links there (kind of like favourite bookmarks).

So I would have 2 fields, Key and value, key would be a descriptive name and value would store the whole url (http://…). Only Key is visible, Values is hidden. After clicking on Key would like to be redirected to the page.

Any ideas how I could do it?

    <script>



        function insert_value(){
            var row = document.createElement("tr"),
                key = document.getElementById('key').value,
                val = document.getElementById('val').value;

            if(!key){
                alert("KEY NEEDS TO BE SET!");
                document.getElementById('key').focus();
                return;
            }
            $.jStorage.set(key, val);
            document.getElementById('key').value = "";
            document.getElementById('val').value = "";
            reDraw();
        }



        function reDraw(){
            var row, del, index;
            var rows = document.getElementsByTagName("tr");
            for(var i=rows.length-1; i>=0; i--){
                if(rows[i].className == "rida"){
                    rows[i].parentNode.removeChild(rows[i]);
                }
            }

            index = $.jStorage.index();
            for(var i=0; i<index.length;i++){
                row = document.createElement("tr");
                row.className = "rida";
                var t = document.createElement("td");
                t.innerHTML = index[i];
                t.colSpan = 2;
                row.appendChild(t);
                t = document.createElement("td");
                t.className = "urls";
                t.innerHTML  = $.jStorage.get(index[i]);
                row.appendChild(t);
                del = document.createElement("a");
                del.href = "javascript:void(0)";
                del.innerHTML = "<div class='delimg'></div>";
                (function(i){
                    del.onclick = function(){
                        $.jStorage.deleteKey(i);
                        reDraw();
                    };
                })(index[i])
                t = document.createElement("td");
                t.appendChild(del)
                row.appendChild(t);
                document.getElementById("tulemused").appendChild(row);

            }
        }

    </script>

Answer 1

First, your code is really confusing….

Nevertheless, regarding your question, you have to output the key column as a link, consisting the value as the href attrubute.

So within your code, you may use soemthing like this as the first column:

//...
var t = document.createElement("td");
var link = document.createElement("a");
link.href = $.jStorage.get(index[i]);
link.innerHTML = index[i];
t.appendChild(link);
row.appendChild(t);
//...