特定の表の列にアイコンを追加する

私はHTMLで2行の表を持っています。私がしようとしているのは、特定の条件が満たされている場合に、画像を列に追加することです。たとえば、tdテキストが "apple"の場合、その横にリンゴイメージを追加します。 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>

これは、次のような結果になります。

アイコンが表示されない理由を私はよく分かりませんリンゴとオレンジの隣。

私は文が一度実行されますが、私は私がこれを書くだろうかわからない場合ので、私はこのためのループではなく、if文のために必要となることを想定しています。私は間違っていると思う何

。

更新日： idsは一意でなければならないことを忘れていたため、クラスをIDに更新しました。

出典

2016-05-29 Jubl

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>

出典

2016-05-29 20:18:32 LordNeo

あなたはforeachのように見えるだろうか私を見ることができますか？私は同じことであなたが答えたときに私の質問を更新していました。私はそれが必要であることを知っているが、私はそれを書く方法がわからない。私はtd.foreach（function（）{if文}）と仮定します。 – Jubl

ありがとうございました。クラス – LordNeo

に更新されました。コードの理解に問題がありますので、私が間違っている場所を教えてください。 forEachメソッドにアクセスできるように空の配列（[]）を使用しています（したがって、 "Array.prototype.forEach.call"を入力する必要はありません）。次に、コールメソッドを使用して、空の配列からデモクラスに注意を向けると、条件文を実行するコールバック関数が渡されます。 – Jubl

特定の表の列にアイコンを追加する

答えて

関連する問題