bran bran - 3 months ago 4
Javascript Question

Making td link using jquery

my json looks like this:

{
"client": "name",
"ip": "ip",
"status": "up",
"smoke": "smokeping-graph.png"
}


I am parsing this info dynamically to make table like this (for the first 3 element):

$.getJSON("url/clients.json",
function (data) {

var tr;
for (var i = 0; i < data.length; i++) {
tr = $('<tr/>');
tr.append("<td>" + data[i].client + "</td>");
$('table').append(tr);

if(data[i].status == "up")
{
$('td',tr).css ('background-color', '#88d066');
} else {
$('td',tr).addClass("statusHOSTDOWN");
};
}
});


For the fourth element with image link, I want to display it such a way that when you mouse over the table graph image pops up. I have the html version worked out which looks like this:

<div class="biz">
<a href="#">PING<span><img src="smokeping-graph.png" /></span></a>
</div>


css:

.biz a { position:relative !important; }
.biz a span {
position:absolute !important;
display:none !important;
z-index:99 !important;
}
.biz a:hover span {
display:block !important;
border:2px solid gray;
margin-top: -3px;
border-radius: 5px;
background-color: white;
}
.biz {
margin-top: 400px;
font-size: 7pt;
font-family: verdana;
font-weight: 600;
color: orangered;
}


I am stuck at js logic, so far I came up with this, and its not working like I hoped for:

if(data[i].smoke != "" )
{
$('td').attr("href", data[i].smoke);
$('td').addClass("link");
} else {

};


gif for example:

hover

Answer

That's the quickest way to do that, although it's a bit dirty.

$.getJSON("url/clients.json",
function (data) {

var tr;
for (var i = 0; i < data.length; i++) {
    tr = $('<tr/>');
    if(data[i].smoke != "") {
       tr.append('<td><a class="link" href="'+data[i].smoke+'">' + data[i].client +  "</a></td>");
    } else {
       tr.append("<td>" + data[i].client +  "</td>");
    }
    $('table').append(tr);

   if(data[i].status == "up")
    {
      $('td',tr).css ('background-color', '#88d066');
     } else {
      $('td',tr).addClass("statusHOSTDOWN");
    };
}
});
Comments