Question

I’ve been trying to get this code to work for a few hours now and can’t seem to figure out what i am doing wrong or what i might have messed up, I copied this code from a example page that works and modified it to make the table i am wanting to build..

Original Cliped Code:

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

now that I changed it to six rows, and loading links and data from javascript array it doesn’t build the table for some reason..

My Code:

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

In the body i have a..

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

that i’m trying to load it into… i’m wanting to stick with jquery, but almost tempted to just use javascript document.write functions

—- UPDATE 05/14/2012 —-
Thanks to alot of help from many people, it has come down to using just JavaScript for now. Have it working and doing as I need it to for now, until i get back from vacation. I would still like to compress/convert it to jquery, so it looks cleaner and already using it for other things. So for anyone who has ran across this post and that is looking for something in this direction here’s the jsFiddle I tossed together to help show how i set it up from everyone’s help…. THANKS AGAIN EVERYONE!!

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

PROBLEM

1. Miss place of $(function) {..
2. alt="'+myArray[i][1]'" should be alt="'+myArray[i][1]+'"

DEMO