Javascript 将JSON结果（html）转换为具有两列的表_Javascript_Html_Css_Json

Javascript 将JSON结果（html）转换为具有两列的表

javascript html css json

Javascript 将JSON结果（html）转换为具有两列的表,javascript,html,css,json,Javascript,Html,Css,Json,我试图将JSON结果加载到表中的两列中：以下是我的HTML代码： <script> var i; $(document).ready(function(){ $.ajax({ type : "POST", url : "http://localhost/ion/ver_comp.php", async : true,

我试图将JSON结果加载到表中的两列中：以下是我的HTML代码：

<script>

        var i;

        $(document).ready(function(){

            $.ajax({
                type : "POST",
                url : "http://localhost/ion/ver_comp.php",
                async : true,
                success : function(datos) {
                    var dataJson = eval(datos);

                    for ( i in dataJson) {

                        $("#content").append("<img src='"+dataJson[i].imagen+"' />");

                    }

                },
                error : function(obj, error, objError) {
                    //avisar que ocurrió un error
                    alert("ERROR DE CONEXION CON SERVIDOR");
                }

            });

        });

        </script>

    </head>

    <body>

            <div id="content">
            </div> <!-- /content -->


    </body>

问题是在两列中显示“图像”（来自json）。我只是不知道如何

问候..

试试这个：

这将添加一个

div

（它会打断一行，因为它是块元素）（与img相反，img是内联元素）

for（var i=0；iTry:
这将创建一个包含两列的表列表
 var tbl = '<table>'
     $.each(datas,function(i,val){
          if(i%2==0)tbl += '<tr>';      
          tbl += '<td><img src="'+val.imagen+'">'+val.nombre+'</td>';       
          if(i%2==1)tbl += '</tr>';
    });
    if(datas.length%2==1)tbl += '</tr>';//safely closes the tr
    tbl += '</table>';
    $("#content").html(tbl);

var-tbl=''
$。每个（数据、函数（i、val）{
如果（i%2==0）tbl+=''；
tbl+=''+val.nombre+''；
如果（i%2==1）tbl+=''；
});
如果（数据长度%2==1）tbl+=''；//安全关闭tr
tbl+=''；
$（“#内容”）.html（待定）；
试试这段代码
$("#content").append("<table>");
for (var i=0;i<dataJson.length;i++)
{
     $("#content").append("<tr><td><img src='"+dataJson[i].imagen+"' /></td></tr>");
}
$("#content").append("</table>");

$（“#内容”）。追加（“”）；
对于（var i=0；i试试这个
            $("#content").append("<table>");
            for (i in dataJson) {
                if(i % 2 == 0) {
                    $("#content").append("<tr>"); 
                    $("#content").append("<td><img src='"+dataJson[i].imagen+"' width='100px' height='100px'/></td>"); 
                } else {
                    $("#content").append("<td><img src='"+dataJson[i].imagen+"' width='100px' height='100px'/></td>"); 
                    $("#content").append("</tr>"); 
                }
            } 
            $("#content").append("</table>");

$（“#内容”）。追加（“”）；
for（i在dataJson中）{
如果（i%2==0）{
$（“#内容”）。追加（“”）；
$（“#内容”）。追加（“”）；
}否则{
$（“#内容”）。追加（“”）；
$（“#内容”）。追加（“”）；
}
} 
$（“#内容”）。追加（“”）；
首先，我不确定为什么要使用表来显示，因为简单的浮动div集合将产生相同的结果，而标记要少得多
其次，我绝对建议考虑一个模板引擎，它可以帮助您保持逻辑和表示的分离。作为一个例子，您可以使用JS模板，比如Mustache或Handlebar
显示如何实现这一点。您可以使用CSS创建列，就像源代码不是JSON一样。我可以问一下为什么这与此相关吗？@jhonatasandoval np。
 var tbl = '<table>'
     $.each(datas,function(i,val){
          if(i%2==0)tbl += '<tr>';      
          tbl += '<td><img src="'+val.imagen+'">'+val.nombre+'</td>';       
          if(i%2==1)tbl += '</tr>';
    });
    if(datas.length%2==1)tbl += '</tr>';//safely closes the tr
    tbl += '</table>';
    $("#content").html(tbl);

$("#content").append("<table>");
for (var i=0;i<dataJson.length;i++)
{
     $("#content").append("<tr><td><img src='"+dataJson[i].imagen+"' /></td></tr>");
}
$("#content").append("</table>");

            $("#content").append("<table>");
            for (i in dataJson) {
                if(i % 2 == 0) {
                    $("#content").append("<tr>"); 
                    $("#content").append("<td><img src='"+dataJson[i].imagen+"' width='100px' height='100px'/></td>"); 
                } else {
                    $("#content").append("<td><img src='"+dataJson[i].imagen+"' width='100px' height='100px'/></td>"); 
                    $("#content").append("</tr>"); 
                }
            } 
            $("#content").append("</table>");