Question

我的json看起来像这样：

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

我正在动态解析这个信息以制作这样的表（对于前3个元素）：

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

对于带有图像链接的第四个元素，我想以这样一种方式显示它，当你将鼠标悬停在表格图形图像上时会弹出。我有html版本，看起来像这样：

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

我坚持使用js逻辑，到目前为止我想出了这个，它不像我希望的那样工作：

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

    };

例如gif：

hover

使用jquery创建td链接

0 个答案: