Question

我正在尝试将行的第一个单元格的内容更改为某些图像。以下是我的Javascript代码，它不起作用。我尝试使用p.appendChild(img)，但因为它在for循环中，每次我按下调用它的按钮时，它会将另一个图像追加到该行。我估计我没有正确使用.src？有人可以帮忙吗？

    var rowx =document.getElementById(rowid); //the row that I want to change its first cell
    var uri= "baseuri"+rowid;
    img = document.createElement('img');
    img.src= uri;
    var p = rowx.cells[0];
    p.src=img; //this doesn't change the first cell's content.if I use p.appendChild(img) it will append new img each time it gets executed.

Answer 1

您无需创建其他图片，只需更改当前图片的src属性即可：

rowx.cells[0].querySelector('img').src = uri;

如果图像是单元格内唯一（或第一个）元素，则可以使用firstElementChild，甚至更好：

rowx.cells[0].firstElementChild.src = uri;

参考文献：querySelector和firstElementChild

Answer 2

单元格为您提供了td元素的HTMLCollection，它们不支持source属性。如果您要编辑内容，则需要附加或修改其innerHTML，例如

rowx.cells[0].innerHTML="";
rowx.cells[0].appendChild(img);

Javascript更改表格单元格的src

2 个答案: