的Javascript改變圖像源

Question

我這也與下面的標記可點擊的鏈接的表格單元格內的圖像：

<a class="modalInput" rel="#flagsSummary" style="cursor:pointer"> 
    <img src="/FatcaOne_0/static/images/circleRed.png" width="20" height="20"> 
</a> 

我感到困惑的JavaScript語法，我需要使用只是爲了改變圖像源或圖像本身，並保持元素及其屬性不變。我試過，但也改變了鏈接，我不想：

rows[lastRowClicked].cells[0].innerHTML = '<a class="modalInput" rel="#flagsSummary" style="cursor:pointer"><img src="/FatcaOne_0/static/images/circleYellow.png" width="20" height="20"></a>'; 

我只希望改變被點擊的最後一行中的圖像。

Answer 1

嘗試是這樣的：

var cell = rows[lastRowClicked].cells[0]; 
var allImagesInCell = cell.getElementsByTagName('img'); 
var theImage = allImagesInCell[0]; 

theImage.setAttribute('src', '/some/new/value'); 

您也可以使用theImage = cell.querySelector('img')，如果你不需要支持IE8及以下（見這裏https://developer.mozilla.org/en-US/docs/Web/API/document.querySelector#Browser_Compatibility）。

Answer 2

您可以搜索表格單元格內的圖像元素，只需更改.src屬性即可。

var cell = rows[lastRowClicked].cells[0]; 
cell.querySelector('img').src = 'some/other/image.jpg';