2

我正在尝试将 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"
    }
]

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

问候..

4

5 回答 5

2

试试这个 ：

这将添加一个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 列。

ps 如果您在谈论表格中的 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

在此处输入图像描述

于 2013-08-06T06:23:32.820 回答
0

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

 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);
于 2013-08-06T06:38:54.253 回答
0

试试这个代码

$("#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>");
于 2013-08-06T06:43:02.397 回答
0

试试这个

            $("#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>");
于 2013-08-06T06:51:46.327 回答
0

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

其次，我绝对建议考虑使用模板引擎，它可以帮助您保持逻辑和表示分离。例如，您可以使用像 Mustache 或 Handlebars 这样的 JS 模板。

这是一个小提琴，展示了如何做到这一点。

于 2013-08-06T06:58:56.520 回答