如何用JQuery表中的图像替换文本

时间:2015-12-05 08:19:53

标签: javascript jquery json

我正在获取JSON值并将它们显示在JQuery表中。有些值称为"成功","失败"和#34; Aborted"。我想用Success.png,Failed.png和Aborted.png的图像图标显示它们。你能帮我解决一下这个问题吗?提前谢谢。

以下是我到目前为止使用的Json和JQuery表:

$.post( "/portal/controllers/apis/test.jag",{
    action: "getData"
}, function(data) {
        var result = JSON.parse(data);
    console.log("----------------------------------start----------------------------");
       $("#tableid").append("<tr><td> Product </td> <td > Day01 </td> <td> Day02 </td> <td> Day03 </td><td> Day07 </td><td> Components </td> </tr>");


        for (var i=0; i<result.length; i++) {
            $("#tableid").append("<tr><td>" + result[i].product + "</td><td>" + result[i].Day01 +
            "</td><td>" + result[i].Day02 + "</td><td>" + result[i].Day03 +
            "</td><td>" + result[i].Day07 + "</td><td>" + result[i].Component + "</td></tr>");

    }
});

Json数据

   {
      "Product":"APIM",
      "Day01":"Success",
      "Day02":"Aborted",
      "Day03":"Failed",
      "Day04":"Failed",
      "Day05":"Failed",
      "Day06":"Failed",
      "Day07":"Success"
   },
   {
      "Product":"AppFactory",
      "Day01":"Aborted",
      "Day02":"Success",
      "Day03":"Success",
      "Day04":"Success",
      "Day05":"Success",
      "Day06":"Success",
      "Day07":"Success"
   },

1 个答案:

答案 0 :(得分:0)

<html>
  <head>
    <title>My title</title>
    <script src="js/jquery.min.js"></script>
    <script>
    var result = [{
        "Product": "APIM",
        "Day01": "Success",
        "Day02": "Aborted",
        "Day03": "Failed",
        "Day04": "Failed",
        "Day05": "Failed",
        "Day06": "Failed",
        "Day07": "Success"
    },
    {
        "Product": "AppFactory",
        "Day01": "Aborted",
        "Day02": "Success",
        "Day03": "Success",
        "Day04": "Success",
        "Day05": "Success",
        "Day06": "Success",
        "Day07": "Success"
    }];
    window.onload = function () {
        for (var i = 0; i < result.length; i++) {
            $("#tableid").append("<tr><td>" + result[i].Product + "</td><td><img src='" + result[i].Day01 + ".png' />" +
            "</td><td><img src='" + result[i].Day02 + ".png' /></td><td><img src='" + result[i].Day03 + ".png' />" +
            "</td><td><img src='" + result[i].Day07 + ".png' /></td><td><img src='" + result[i].Component + ".png' /></td></tr>");
        }
    }
    </script>
</head>
<body>
 <table id="tableid"></table>
</body>
</html>