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

时间:2013-04-01 15:25:32

标签: jquery html arrays html-table

我试图通过用书籍封面图像替换库存图像来填充现有的图像表。我有一系列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编号中的每一个替换所有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>

1 个答案:

答案 0 :(得分:0)

应该是

<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>