Dynamicaly从数组构建表

Question

我一直试图让这段代码工作几个小时，似乎无法弄清楚我做错了什么或者我可能搞砸了什么，我从一个有效的示例页面复制了这段代码并对其进行了修改制作我想要建造的桌子..

原始的剪辑代码：

$(function () {
            var $wrap = $('<div>').attr('id', 'tableWrap');
            var $tbl = $('<table>').attr('id', 'basicTable');

            for (var i = 0; i < 200; i++) {
                $tbl.append($('<tr>').append($('<td>').text(i),$('<td>').text(200 - i)));
            }

            $wrap.append($tbl);
            $('body').append($wrap);
        });

现在我将它改为六行，并从javascript数组中加载链接和数据，由于某种原因它不构建表。

我的代码：

myArray = new Array();
    myArray[0] = new Array("001","Title","http://www.google.com/","https://www.google.com/images/logos/google_logo_41.png");
    myArray[1] = new Array("002","Title","http://www.google.com/","https://www.google.com/images/logos/google_logo_41.png");
    myArray[2] = new Array("003","Title","http://www.google.com/","https://www.google.com/images/logos/google_logo_41.png");
    myArray[3] = new Array("004","Title","http://www.google.com/","https://www.google.com/images/logos/google_logo_41.png");
    myArray[4] = new Array("005","Title","http://www.google.com/","https://www.google.com/images/logos/google_logo_41.png");
    myArray[5] = new Array("006","Title","http://www.google.com/","https://www.google.com/images/logos/google_logo_41.png");
    myArray[6] = new Array("007","Title","http://www.google.com/","https://www.google.com/images/logos/google_logo_41.png");
    myArray[7] = new Array("008","Title","http://www.google.com/","https://www.google.com/images/logos/google_logo_41.png");
    myArray[8] = new Array("009","Title","http://www.google.com/","https://www.google.com/images/logos/google_logo_41.png");
    myArray[9] = new Array("010","Title","http://www.google.com/","https://www.google.com/images/logos/google_logo_41.png");


    var $wrap = $('<div>').attr('id', 'tableWrap');              
    var $tbl = $('<table>').attr('id', 'basicTable'); 

    for(i=0;i<myArray.length;i++){
        $(function () {                                   
            $tbl.append($('<tr>').append(
                        $('<td>').text('<a href="'+myArray[i][2]+'" target="_new"><img src="'+myArray[i][3]+'" alt="'+myArray[i][1]'"></a>'),
                        $('<td>').text('<a href="'+myArray[i][2]+'" target="_new"><img src="'+myArray[i][3]+'" alt="'+myArray[i][1]'"></a>'),
                        $('<td>').text('<a href="'+myArray[i][2]+'" target="_new"><img src="'+myArray[i][3]+'" alt="'+myArray[i][1]'"></a>'),
                        $('<td>').text('<a href="'+myArray[i][2]+'" target="_new"><img src="'+myArray[i][3]+'" alt="'+myArray[i][1]'"></a>'),
                        $('<td>').text('<a href="'+myArray[i][2]+'" target="_new"><img src="'+myArray[i][3]+'" alt="'+myArray[i][1]'"></a>'),
                        $('<td>').text('<a href="'+myArray[i][2]+'" target="_new"><img src="'+myArray[i][3]+'" alt="'+myArray[i][1]'"></a>')));             
        }              
        $wrap.append($tbl);             
        $('#c').append($wrap);         
    });

在身体我有...

 <div id="c"></div>

我正在尝试将其加载到...我想坚持使用jquery，但几乎想要使用javascript document.write函数

----更新05/14/2012 ----
感谢很多人的帮助，现在只使用JavaScript。 让它工作和做我现在需要它，直到我从假期回来。 我仍然想压缩/转换为jquery，所以它看起来更干净，已经用于其他事情。 所以对于那些遇到过这个帖子的人而言，正在寻找这个方向的东西，这里是jsFiddle我一起扔来帮助展示我如何从每个人的帮助中设置它......感谢每个人！

Answer 1

$(function () {      
    var $wrap = $('<div/>').attr('id', 'tableWrap');              
    var $tbl = $('<table/>').attr('id', 'basicTable');

    for(i=0;i<myArray.length;i++){
            //  $(function () { is miss placed                     
            $tbl.append($('<tr/>').append(
                        $('<td/>').html('<a href="'+myArray[i][2]+'" target="_new"><img src="'+myArray[i][3]+'" alt="'+myArray[i][1]+'"></a>'),
                        $('<td/>').html('<a href="'+myArray[i][2]+'" target="_new"><img src="'+myArray[i][3]+'" alt="'+myArray[i][1]+'"></a>'),
                        $('<td/>').html('<a href="'+myArray[i][2]+'" target="_new"><img src="'+myArray[i][3]+'" alt="'+myArray[i][1]+'"></a>'),
                        $('<td/>').html('<a href="'+myArray[i][2]+'" target="_new"><img src="'+myArray[i][3]+'" alt="'+myArray[i][1]+'"></a>'),
                        $('<td/>').html('<a href="'+myArray[i][2]+'" target="_new"><img src="'+myArray[i][3]+'" alt="'+myArray[i][1]+'"></a>'),
                        $('<td/>').html('<a href="'+myArray[i][2]+'" target="_new"><img src="'+myArray[i][3]+'" alt="'+myArray[i][1]+'"></a>')));             
        }              
        $wrap.append($tbl);             
        $('#c').append($wrap);         
    });

问题

1. 错过$(function) {..
2. alt="'+myArray[i][1]'"应为alt="'+myArray[i][1]+'"

DEMO

Answer 2

首先，忘记在for语句后关闭table元素

第二，为什么$(function() { after for ？错误。如果使用这个，你必须用});关闭它});

var $wrap = $('<div>').attr('id', 'tableWrap');              
    var $tbl = $('<table>').attr('id', 'basicTable'); 

    for(i=0;i<myArray.length;i++){                                 
            $tbl.append($('<tr>').append(
                        $('<td>').text('<a href="'+myArray[i][2]+'" target="_new"><img src="'+myArray[i][3]+'" alt="'+myArray[i][1]'"></a>'),
                        $('<td>').text('<a href="'+myArray[i][2]+'" target="_new"><img src="'+myArray[i][3]+'" alt="'+myArray[i][1]'"></a>'),
                        $('<td>').text('<a href="'+myArray[i][2]+'" target="_new"><img src="'+myArray[i][3]+'" alt="'+myArray[i][1]'"></a>'),
                        $('<td>').text('<a href="'+myArray[i][2]+'" target="_new"><img src="'+myArray[i][3]+'" alt="'+myArray[i][1]'"></a>'),
                        $('<td>').text('<a href="'+myArray[i][2]+'" target="_new"><img src="'+myArray[i][3]+'" alt="'+myArray[i][1]'"></a>'),
                        $('<td>').text('<a href="'+myArray[i][2]+'" target="_new"><img src="'+myArray[i][3]+'" alt="'+myArray[i][1]'"></a>')));             
        }              
  $tbl.append("</table">);