如何按图像排列六列？

Question

我尝试将图片排列成六列，但它重复了图片

$(document).ready(function () {
        alert('Hello');
        $.ajax({
            type: "POST",
            contentType: "application/json; charset=utf-8",
            url: "Default4.aspx/BindDatatable",
            data: "{}",
            dataType: "json",
            success: function (data) {
                var imgs;
                for (var i = 0; i < data.d.length; i++) {
                    $("#gvDetails").append("<tr><td><img src=" + data.d[i].ImagePath + " height='60px' width='100px' ></img></td><td><img src=" + data.d[i + 1].ImagePath + " height='60px' width='100px' ></img></td><td><img src=" + data.d[i + 2].ImagePath + " height='60px' width='100px' ></img></td><td><img src=" + data.d[i + 3].ImagePath + " height='60px' width='100px' ></img></td><td><img src=" + data.d[i + 4].ImagePath + " height='60px' width='100px' ></img></td><td><img src=" + data.d[i + 5].ImagePath + " height='60px' width='100px' ></img></td></tr>");
                }                                                                
            },
            error: function (result) {
                alert("Error");
            }
        });
    });

那么如何避免重复图片并按照图片数量排列呢？

Answer 1

试试这个将您的成功函数更改为类似的东西。注意（我不知道你的数据是什么return）它可能对你有用。

success: function (data) {
        var el = "<tr>";
        for (var i = 0; i < data.d.length; i++) {
        if ( i%6 == 0 ) {
            el += "</tr><tr>"
         }
        el += "<td><img src=" + data.d[i].ImagePath + " height='60px' width='100px' /></td>");
        } 
        el += '</tr>';
        $("#gvDetails").append( $(el) );                                                               
    }

如何按图像排列六列？

How to arrange six columns in rows as per images?

jquery

json

webmethod