Как заменить значение ячейки таблицы на изображение?

Question

У меня есть вывод таблицы, который генерируется динамически.

У меня есть функция javascript, которая выполняет некоторую раскраску и замену значений ячеек, что прекрасно (например, фон становится зеленым, если 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%; 
} 

JavaScript

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/