표 셀 값을 그림으로 바꾸는 방법은 무엇입니까?

Question

동적으로 생성 된 테이블 출력이 있습니다.

세포 값의 채우기 및 대체를 수행하는 자바 스크립트 기능이 있습니다 (예 : innerText==3; 아래의 샘플 코드를 찾아보십시오. 배경이 녹색이 ​​됨).

이제 innerText==9이있는 표 셀에 그림을 삽입하려고합니다. 내 기능에이 기능을 포함시킬 수 있습니까? pictureGrey 선언을 시도하여 innerText에 할당했지만 작동하지 않습니다.

누구나 아이디어가 있습니까? 누군가 나를 도울 수 있습니까? 사전에

고마워, 게로 B.

function ModifyData() { 
 
     var Elements=document.getElementsByTagName('td'); 
 
     pictureGrey="Z_led_grey.gif"; 
 

 
     for(var i=0;i<Elements.length;i++) { 
 
     if(Elements[i].innerText=='3') { 
 
      Elements[i].style.color='green'; 
 
      Elements[i].style.background='green'; 
 
      Elements[i].innerText=' '; 
 
     } 
 
     if(Elements[i].innerText=='9') { 
 
      Elements[i].innerText= pictureGrey ; 
 
     } 
 
     } 
 
    }

Answer 1

새 이미지 요소를 만들고 요소를 추가 할 수 있습니다. 데이터가 나중에 다시 변경 될 수 있는지 여부에 따라 먼저 이미지의 존재 여부를 확인해야 할 수도 있습니다.

CSS

img.myFullSizeImageClass { 
    width: 100%; 
    height: 100%; 
} 

자바 스크립트

function ModifyData() { 
    var Elements = document.getElementsByTagName('td'); 
    pictureGrey = "angular-icon.png"; 

    for (var i = 0; i < Elements.length; i++) { 
     if (Elements[i].firstChild.nodeValue == '3') { 
      Elements[i].style.color = 'green'; 
      Elements[i].style.background = 'green'; 
      Elements[i].firstChild.nodeValue = ' '; 
     } 
     else if (Elements[i].firstChild.nodeValue == '9') { 
      Elements[i].firstChild.nodeValue = ""; 
      var img = document.createElement("img"); 
      img.src = pictureGrey; 
      img.className = 'myFullSizeImageClass' 
      Elements[i].appendChild(img); 
     } 
    } 
} 

Answer 2

아래의 코드를 확인하시기 바랍니다.

function ModifyData() { 
    var Elements=document.getElementsByTagName('td'); 
    pictureGrey="Z_led_grey.gif"; 

    for(var i=0;i<Elements.length;i++) { 
    if(Elements[i].innerText=='3') { 
     Elements[i].style.color='green'; 
     Elements[i].style.background='green'; 
     Elements[i].innerText=' '; 
    } 
    if(Elements[i].innerText=='9') { 
     Elements[i].innerText=' '; 
     var img = document.createElement("img"); 
     img.src=pictureGrey; 
     Elements[i].appendChild (img);} 
    } 
} 

데모 링크 : http://jsfiddle.net/asimshahiddIT/acz5xn3b/