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);         
    });

<强>问题

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

<强> DEMO

Answer 2

首先，您忘记在table声明

之后关闭for元素

第二，$(function() {之后为什么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">);

从数组动态构建表

2 个答案: