使用javascript将图像插入表格

Question

我正在使用使用Play框架技术的Web应用程序。在我的一个scala.html视图中，我使用它来简单地显示图像：

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

它工作得很好。

现在在另一个网站上我想建立一个表。该表现在如何，并显示它的数据，工作正常。所以现在在第一个柱子里，我想在每一行都放一个图像。这是我认为它应该如何工作：

$(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(); 
      } 

但是，如果我这样做，表根本不显示。我不知道为什么。图像的来源是正确的。它肯定不能只是因为它在javascript函数中，因为其他HTML标签只要我不尝试添加图像就可以正常工作。我非常感谢任何帮助。

Answer 1

这是我的两分钱。在这一行：

$('#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>"); 

尝试逃脱SRC，宽度和高度" S，并在调用中使用'，而不是"的路径@routes.Assets.at。所以，你要append()通话应该是这样的：

$('#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>"); 

而且一旦代码被注入，HTML标记应该是这样的：

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

这应该由你的浏览器呈现像往常一样， 除非在那些obj和somedata的值内有隐藏的HTML标记或其他字符，如<和>。这可能会搞砸了，所以如果可以的话，请尽量检查并修改它们。