将图标添加到特定表列

问题描述：

我在HTML中有一个2行表。我想要做的是添加一个图像到一列，如果一定条件得到满足。例如，如果td文本是“苹果”，那么我想在它旁边添加一个苹果图像。如果td文本是“橙色”，那么我想在它旁边添加一个橙色图像。将图标添加到特定表列

这是我到目前为止有：

<!DOCTYPE html> 
<html> 
<head> 
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0-rc1/jquery.min.js"></script> 
</head> 
<body> 

    <table class="table table-responsive"> 
     <thead> 
     <tr> 
      <th>Number</th> 
      <th>Name</th> 
      <th>Type</th> 
     </tr> 
     </thead> 
     <tbody> 
      <tr> 
      <td>0x3432</td> 
      <td>Fruit1</td> 
      <td class="demo">apple</td> 
      </tr> 
      <tr> 
      <td>0x34762</td> 
      <td>Fruit2</td> 
      <td class="demo">orange</td> 
      </tr> 

     </tbody> 
    </table> 

    <script> 

    if (document.getElementsByClassName("demo").innerHTML === "apple") { 
     document.getElementsByClassName("demo").innerHTML = "<img src='apple.png' style='display: inline;'><p style='display: inline;'> Apple</p>"; 
    } 

    if (document.getElementsByClassName("demo").innerHTML === "orange"){ 
     document.getElementsByClassName("demo").innerHTML = "<img src='orange.png' style='display: inline;'><p style='display: inline;'> Orange</p>"; 
    } 

    </script> 

    </body> 
    </html>

这将导致以下：

我不知道为什么图标不显示在苹果和桔子旁边。

什么，我认为是错误的：

我认为我需要一个for循环这不是一个if语句，因为如果语句运行一次，但我不知道我怎么会写这个。

UPDATE： 由于我忘记了id必须是唯一的，因此更新了class的id。

答

你需要将它包装在一个foreach循环中，否则它只会检查第一个。

此外，请记住ID必须是唯一的，所以您可以使用一个类来代替

固定使用类而不是ID：

<script> 
[].forEach.call(document.getElementsByClassName("demo"), function (el) { 
    if (el.innerHTML === "apple") { 
     el.innerHTML = "<img src='apple.png' style='display: inline;'><p style='display: inline;'> Apple</p>"; 
    } else if (el.innerHTML === "orange"){ 
     el.innerHTML = "<img src='orange.png' style='display: inline;'><p style='display: inline;'> Orange</p>"; 
    } 
}); 
</script>

你能告诉我在foreach会是什么样子？当你回答同样的问题时，我正在更新我的问题。我知道它需要，但我不知道如何写它。我假设td.foreach（function（）{if语句}）; – Jubl

你有，更新到类 – LordNeo

我无法理解代码，所以让我知道我错了。您正在使用空数组（[]），因此您可以访问forEach方法（因此您不必输入“Array.prototype.forEach.call”）。接下来，您使用call方法将注意力从空数组引向demo类，然后传递一个执行条件语句的回调函数。 – Jubl

将图标添加到特定表列

相关推荐