Question

我正在尝试将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代码（来自PHP脚本）：

[
    {
        "cod": "1",
        "nombre": "Target HR",
        "imagen": "http://i.imgur.com/DFLF20G.png"
    },
    {
        "cod": "2",
        "nombre": "BCP",
        "imagen": "https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcT3JhpDOH-cK-d2QF3RflbSc6dgb1ELCblX6UWiX63S3OzKST0r"
    },
    {
        "cod": "3",
        "nombre": "Gloria",
        "imagen": "http://cdnimg.perulactea.com/wp-content/uploads/2009/08/Gloria1.JPG"
    },
    {
        "cod": "4",
        "nombre": "Cristal",
        "imagen": "http://filmsperu.pe/New/Images/Noticias/content/CRISTAL_YR_15_06_2011/670x02.gif"
    }
]

问题是在两列中显示'images'（来自json）。我只是不知道如何...

问候..

Answer 1

试试这个：

这将添加一个div（它会断开一条线，因为它是一个块元素）（而不是img，它是内联元素）

 for (var i=0;i<dataJson.length;i++) {

                        if (i%2==0) $("#content").append("<div/>")
                        $("#content").append("<img src='"+dataJson[i].imagen+"' />");
                    }

这看起来像2列。

P.S。如果你在表格中谈论2列，那就是另一回事了。（代码在途中）：

如果你有桌子：

 var dataJson = eval(t);

var row=0;
   for (var i=0;i<dataJson.length;i++)
   {
     row=Math.round((0.4)*Math.floor(i)); //row number trick is here. 

     $("table tr").eq(row).find("td").eq(i%2).append("<img src='"+dataJson[i].imagen+"' width='100'/>");
     }

<强> http://jsbin.com/arojaw/3/edit

enter image description here

Answer 2

尝试：这将创建一个包含两列的表列表

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

Answer 3

试试这段代码

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

Answer 4

试试这个

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

Answer 5

首先，我不确定为什么要使用表格进行此显示，因为简单的浮动div集合会产生相同的结果而且标记要少得多。

其次我绝对建议考虑一个模板引擎，它可以帮助你保持逻辑和演示分离。作为一个例子，你可以使用像Winache或Handlebars这样的JS Templaters。

Here is a fiddle展示了如何做到这一点。

将JSON结果（以html格式）转换为包含两列的表

5 个答案: