如何用圖片替換表格單元值？

我有一個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 ; 
 
     } 
 
     } 
 
    }

來源

2014-11-24 GeroB.

您可以創建一個新的形象元素和元素追加它。根據數據是否可以再次更改，您可能需要首先檢查圖像的存在。

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); 
     } 
    } 
}

來源

2014-11-24 14:48:03 DoctorMick

嗨DoctorMick，自帶相當接近我想要的東西。現在它顯示了圖像的9和一個佔位符。是否有可能將圖像自動縮放到單元格的寬度和高度（這是動態的）並去掉數字「9」？ – 2014-11-24 14:56:42

@GeroB。，看到更新，還沒有測試過，但它應該工作。 – DoctorMick 2014-11-24 15:06:37

好吧，沒有圖片不顯示，佔位符顯示，不適合。這是鏈接到圖片句法正確：pictureGrey =「C：\ temp \ Z_led_grau.gif」; ？非常感謝！ – 2014-11-24 15:27:36

請檢查下面的代碼。

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/

來源

2014-11-24 14:58:34 asimshahiddIT

如何用圖片替換表格單元值？

回答

相關問題