Einfügen Bild in Tabelle mit Javascript

Question

Ich arbeite an einer Webanwendung, die die Play-Framework-Technologie verwendet. In einer meiner scala.html Ansichten benutze ich diese um ein Bild zu zeigen:

<img src="@routes.Assets.at("images/image/1003.png")" width="30" height="30"> 

Und es funktioniert gut.

Jetzt auf einer anderen Seite möchte ich eine Tabelle erstellen. Die Tabelle, wie es jetzt ist und ihre Daten anzeigen, funktioniert gut. Jetzt möchte ich in der ersten Kolumne ein Bild in jede Zeile setzen. Und das ist, wie ich dachte, es sollte funktionieren:

$(function() { 
      $('#table').append("<thead><tr><th><a>CImage</a></th><th><a>C0</a></th><th><a>C1</a></th><th><a>C2</a></th><th><a>C3</a></th><tr></thead><tbody>"); 
      for(var i = 0; i < jsonObj.obj.length;i++){ 
       $('#table').append("<tr><td><img src="@routes.Assets.at("images/image/1003.png")" width="30" height="30"></td><td>"+jsonObj.obj[i]+"</td><td>"+ jsonObj.somedata[i]+"</td><td>"+ jsonObj.someData[i]+"</td><td>"+ jsonObj.someData[i]+"</td><tr>"); 
      } 
      $('#table').append("</tbody>"); 

      $("#table").tablesorter(); 
      } 

Aber wenn ich das tue, ist die Tabelle nicht überhaupt angezeigt. Und ich weiß nicht warum. Die Quelle des Bildes ist korrekt. Es kann sicherlich nicht sein, nur weil es in einer JavaScript-Funktion ist, da die anderen HTML-Tags gut funktionieren, solange ich nicht versuche, ein Bild hinzuzufügen. Ich bin sehr dankbar für jede Hilfe.

Answer 1

Hier sind meine zwei Cent. In dieser Zeile:

$('#table').append("<tr><td><img src="@routes.Assets.at("images/image/1003.png")" width="30" height="30"></td><td>"+jsonObj.obj[i]+"</td><td>"+ jsonObj.somedata[i]+"</td><td>"+ jsonObj.someData[i]+"</td><td>"+ jsonObj.someData[i]+"</td><tr>"); 

Versuchen Sie, die src, Breite und Höhe " s zu entkommen, und ' statt " für den Pfad in dem Aufruf von @routes.Assets.at verwenden. Also, auf Ihren Anruf append() sollte wie folgt aussehen:

$('#table').append("<tr><td><img src=\"@routes.Assets.at('images/image/1003.png')\" width=\"30\" height=\"30\"></td><td>"+jsonObj.obj[i]+"</td><td>"+ jsonObj.somedata[i]+"</td><td>"+ jsonObj.someData[i]+"</td><td>"+ jsonObj.someData[i]+"</td><tr>"); 

Und sobald der Code injiziert wird, sollte die HTML-Markup wie folgt aussehen:

<tr> 
    <td> 
    <img src="@routes.Assets.at('images/image/1003.png')" width="30" height="30"> 
    </td><td> 
    {{jsonObj.obj[i]}} 
    </td><td> 
    {{jsonObj.somedata[i]}} 
    </td><td> 
    {{jsonObj.someData[i]}} 
    </td><td> 
    {{jsonObj.someData[i]}} 
    </td> 
<tr> 

Dies sollte von Ihrem Browser wie gewohnt wiedergegeben werden, es sei denn innerhalb dieser obj und somedata Werte gibt es versteckte HTML-Tags oder einige andere Zeichen wie < und >. Das könnte Dinge durcheinander bringen, also versuchen Sie es auch zu überprüfen und zu scannen, wenn Sie können.