Question

我有一个动态生成的表输出。

我有一个javascript函数正在对单元格值进行一些着色和替换，这很好（例如，innerText==3;时背景变为绿色，请在下面找到示例代码。）

现在我正在尝试在具有innerText==9的表格单元格中插入图片。是否可以在我的功能中包含此功能？我尝试将pictureGrey声明分配给innerText，但这不起作用。

有没有人有想法，有人可以帮助我吗？

提前多多感谢， Gero 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/

如何用图片替换表格单元格值？

2 个答案: