Hinzufügen von Symbolen zu einer bestimmten Tabelle Spalte

Ich habe eine 2-zeilige Tabelle in HTML. Was ich versuche, ist, ein Bild zu einer Spalte hinzuzufügen, wenn eine bestimmte Bedingung erfüllt ist. Wenn der td-Text beispielsweise "Apfel" ist, möchte ich ein Apple-Bild daneben hinzufügen. Wenn der TD-Text "orange" ist, möchte ich ein orangefarbenes Bild daneben hinzufügen. HierHinzufügen von Symbolen zu einer bestimmten Tabelle Spalte

ist das, was ich bisher:

<!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>

Daraus ergibt sich wie folgt zusammen:

Ich bin mir nicht sicher, warum die Symbole nicht zeigen sich neben Apfel und Orange.

Was ich denke, ist falsch:

Ich gehe davon aus, dass ich eine for-Schleife für diesen eher als eine if-Anweisung benötigen würde, da, wenn Aussagen einmal laufen, aber ich bin mir nicht sicher, wie ich das schreiben würde.

UPDATE: ID zu Klasse aktualisiert, da ich vergessen habe, dass IDs eindeutig sein müssen.

Quelle

2016-05-29 Jubl

Sie müssen es in eine foreach-Schleife wickeln, sonst wird es nur die erste überprüfen.

Denken Sie auch daran, dass ID muss eindeutig sein, so dass Sie eine Klasse verwenden, kann stattdessen

Fest Klasse verwenden anstelle von 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>

Quelle

2016-05-29 20:18:32 LordNeo

Können Sie mir zeigen, wie die foreach aussehen würde? Ich habe meine Frage aktualisiert, als Sie mit der gleichen Frage geantwortet haben. Ich weiß, dass es nötig ist, aber ich bin mir nicht sicher, wie ich es schreiben soll. Ich nehme an td.foreach (function() {if statements}); – Jubl

Dort haben Sie, aktualisiert auf Klasse – LordNeo

Ich habe Probleme, den Code zu verstehen, also lassen Sie mich wissen, wo ich falsch liege. Sie verwenden das leere Array ([]) nur, damit Sie Zugriff auf die forEach-Methode haben (Sie müssen also nicht "Array.prototype.forEach.call" eingeben). Als nächstes verwenden Sie die Aufrufmethode, um die Aufmerksamkeit von dem leeren Array auf die Demoklasse abzulenken, und dann übergeben Sie eine Callback-Funktion, die die bedingten Anweisungen ausführt. – Jubl

Hinzufügen von Symbolen zu einer bestimmten Tabelle Spalte

Antwort

Verwandte Themen