使用基于数组的图像填充表格答案

【问题标题】：Populating a table with images based on an array使用基于数组的图像填充表格
【发布时间】：2013-03-22 16:38:13
【问题描述】：

我正在尝试通过用书籍封面图像替换库存图像来填充现有的图像表。我有一个 ISBN 编号数组，我想将它们连接到获取每个图像的 URL，然后将它们显示在表格中。

表格如下所示（4 行 5 列）：

<center><table id="booktable" width="850" border="0" cellpadding="0" cellspacing="6"><tbody align="center">
    <!-- Row 1 -->
    <!-- "http://i.imgur.com/vaFKJ.png" -->
        <tr><td><img src="http://i.imgur.com/vaFKJ.png" width="170" height="230" title="date"></td>
        <td><img src="http://i.imgur.com/vaFKJ.png" width="170" height="230" title="date"></td>
        <td><img src="http://i.imgur.com/vaFKJ.png" width="170" height="230" title="date"></td>
        <td><img src="http://i.imgur.com/vaFKJ.png" width="170" height="230" title="date"></td>
        <td><img src="http://i.imgur.com/vaFKJ.png" width="170" height="230" title="date"></td></tr>

在这里，我定义了我的 ISBN 编号数组。我想用包含 20 个 ISBN 编号的 URL 替换所有 20 个图像标签中的 URL。

<script src="jquery-1.9.1.min.js">
        var isbns = ["0525953485", "1439102767", "0307588386", "0316097519", "0307273571", "0399161775", "0399160752", "0765323974", "0770437850", "0553801473", "1414319703", "0399158820", "0062231707", "0441020011", "0345523504", "0765325950", "1451647034", "0812993802", "0312591837", "039915812X"];
        for(var i=0; i<isbns.length; i++) {
            .html("<img src='http://covers.openlibrary.org/b/isbn/'+ isbns[i] + '-M.jpg' width="170" height="230" title="date">"
            }    
        });
    </script>

【问题讨论】：

标签： jquery html arrays html-table

【解决方案1】：

应该是

<script src="jquery-1.9.1.min.js"></script>
<script>
    $(function(){
        var isbns = ["0525953485", "1439102767", "0307588386", "0316097519", "0307273571", "0399161775", "0399160752", "0765323974", "0770437850", "0553801473", "1414319703", "0399158820", "0062231707", "0441020011", "0345523504", "0765325950", "1451647034", "0812993802", "0312591837", "039915812X"];

        $.each(isbns, function(i, v){
            $('<img src="http://covers.openlibrary.org/b/isbn/'+ v + '-M.jpg" width="170" height="230" title="date">').appendTo('body')
        });
    });
</script>

【讨论】：