用图像替换列内容不起作用。它只取代最后一个

Question

LOOK at the image PLEASE 有一张桌面，每一秒都在用AJAX刷新。表的第二列有0或1个里面。我想用一个图像替换0，用另一个图像替换1。目前我正在遍历所有行，但只填充了一种图像的最后一行。所有行都有一张图片。我究竟做错了什么？

var warningImg = document.createElement("IMG"); 
        warningImg.src = "icone/ic_warning.png"; 

       var okImg = document.createElement("IMG"); 
        okImg.src = "icone/ic_done.png";  

$(document).ready(function(){ 
     $.ajaxSetup({ cache: false }); 
      setInterval(function() { 
       $.get("IOdoc.htm", function(result){ 
        var stringArray = result.trim().split(","); 

        $('#safety tr:eq(0) td:eq(1)').text(stringArray[0]); 
        $('#safety tr:eq(1) td:eq(1)').text(stringArray[1]); 
        $('#safety tr:eq(2) td:eq(1)').text(stringArray[2]); 

        var safetyEls = document.querySelectorAll("#safety tr td:nth-child(2)"); 

        for(var i=0; i < safetyEls.length ; i++){ 
         if (safetyEls[i].innerHTML.trim() == "1") 
         { 
          safetyEls[i].appendChild(okImg); 
         } 
         else{ 
          safetyEls[i].appendChild(warningImg);} 
        } 
      }); 
     },1000); 
    }); 

我试过一些证明for循环正在工作的东西。我用textContent替换appendChild只写了一些文本。 safetyEls [i] .textContent =“警告”

这工作。 Working table just with text

Answer 1

每当您拨打appendChild时，您的移动您创建的图像。

尝试克隆它为每一行建立新的图片：

    if (safetyEls[i].innerHTML.trim() == "1") 
        { 
         safetyEls[i].appendChild(okImg.cloneNode(true)); 
        } 
        else{ 
         safetyEls[i].appendChild(warningImg.cloneNode(true));} 
       } 

欲了解更多详情，请参阅http://www.w3schools.com/jsref/met_node_clonenode.asp