Web查询并滚动显示图片

查询并滚动流程参考《Web查询并滚动显示》。

此处只显示如何在表格里面显示图片、调整每列数目以及图片和名字交替显示。

一、设置表格

            <div class="body-content"  style="overflow:scroll;">  
                <table class="table table-hover text-center">                      
                    <thead style = "text-align:center; background-color:#555; color:#fff;">
                        <tr>
    						<td width="50%">image1</td>
    						<td width="50%">image2</td> 
                        </tr>  
                    </thead>
                    <tbody style = "text-align:center;" id="data"></tbody>
                </table>     
            </div>   

二、显示

设置宽度，高度根据图片比例自动调整。图片和图片名字交替显示

function show(data) {
    let totalPage = data.data.total_page;
    init(currentPage, totalPage);
    
    changePage(currentPage);   
    
    for (var k=0; k<data.data.data.length; k+=2){
        let el = "<tr>" + 
                    "<td>" +
                    "<img src=" + getURL() + data.data.data[k] + " height=\"360\"></td><td>" +                 
                   "<img src=" + getURL() + data.data.data[k+1] + " height=\"360\"></td></tr>";
					
        $('#data').append(el);
        
        
        let e2 = "<tr>" + 
                    "<td>" +
                    data.data.data[k] + "</td><td>" +  
                   data.data.data[k+1] + "</td></tr>";
					
        $('#data').append(e2);
    }
}

三、结果