如果单元格中的文本包含特定单词，则在其中添加图片＃2

Question

我希望我的桌子将特定的文本转换为图像。

我接近读取此线程的解决方案： 如果单元格中的文本包含特定单词，则在其中放入图片

我遇到的问题是表格仅更改了第一个文本，如果示例“ RED”第二次出现，它将返回空白到单元格而不是另一个红色图像。

我是编程的新手，并尝试从上述线程复制代码，有点像执行重复操作那样错误，而不是在同一段落中声明所有内容，但这是现在的样子，它是半成品:)

var allTableCells = document.getElementsByTagName("td");

var yourImage = new Image();
yourImage.src = "red.png";

for (var i = 0;i < allTableCells.length; i++) {
    var node = allTableCells[i];
    if (node.textContent.trim() === "RED") {
        node.textContent = "";
        node.appendChild(yourImage);
    }
}


var allTableCells = document.getElementsByTagName("td");

var yourImage = new Image();
yourImage.src = "blue.png";

for (var i = 0;i < allTableCells.length; i++) {
    var node = allTableCells[i];
    if (node.textContent.trim() === "BLUE") {
        node.textContent = "";
        node.appendChild(yourImage);
    }
}

var allTableCells = document.getElementsByTagName("td");

var yourImage = new Image();
yourImage.src = "green.png";

for (var i = 0;i < allTableCells.length; i++) {
    var node = allTableCells[i];
    if (node.textContent.trim() === "GREEN") {
        node.textContent = "";
        node.appendChild(yourImage);
    }
}

var allTableCells = document.getElementsByTagName("td");

var yourImage = new Image();
yourImage.src = "cyan.png";

for (var i = 0;i < allTableCells.length; i++) {
    var node = allTableCells[i];
    if (node.textContent.trim() === "CYAN") {
        node.textContent = "";
        node.appendChild(yourImage);
    }
}

var allTableCells = document.getElementsByTagName("td");

var yourImage = new Image();
yourImage.src = "orange.png";

for (var i = 0;i < allTableCells.length; i++) {
    var node = allTableCells[i];
    if (node.textContent.trim() === "ORANGE") {
        node.textContent = "";
        node.appendChild(yourImage);
    }
}

非常感谢有人能帮助我，让每个也包含特定文本的新单元格获得一张图片！

Answer 1

您将附加相同的DOM元素，因此最终只会得到一个图像。

将图像元素创建移动到循环中

for (var i = 0;i < allTableCells.length; i++) {
    var node = allTableCells[i];
    if (node.textContent.trim() === "RED") {
        node.textContent = "";
        var yourImage = new Image();
        yourImage.src = "red.png";
        node.appendChild(yourImage);
    }
}