Question

我在HTML中有一个2行表。我想要做的是在满足特定条件的情况下将图像添加到列中。例如，如果td文本是＆＃34; apple＆＃34;然后我想在它旁边添加一个苹果图像。如果td文本是＆＃34;橙色＆＃34;然后我想在它旁边添加一个橙色图像。

以下是我目前的情况：

<!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语句，因为if语句只运行一次，但我不确定如何写这个。

更新更新了类的ID，因为我忘记了id必须是唯一的。

Answer 1

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

另外，请记住ID必须是唯一的，所以你可以使用类

修复了使用class而不是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>

将图标添加到特定表列

1 个答案: