2

JSON の結果をテーブルの 2 つの列にロードしようとしています: これが私の 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 から) を 2 列で表示することです。方法がわかりません...

ご挨拶..

4

5 に答える 5

0

試してください: これにより、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);
于 2013-08-06T06:38:54.253 に答える
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

このコードを試してください

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

まず第一に、この表示にテーブルを使用する理由がわかりません。単純なフローティング div コレクションでは、マークアップがはるかに少なくても同じ結果が得られるためです。

次に、ロジックとプレゼンテーションを分離しておくのに役立つテンプレート エンジンについて検討することを強くお勧めします。例として、Mustache や Handlebars などの JS テンプレートを使用できます。

これがどのように行われるかを示すフィドルです。

于 2013-08-06T06:58:56.520 に答える