从数组动态构建表

Dynamicaly building table from array

本文关键字:构建 动态 数组      更新时间:2023-09-26

我一直在尝试让这段代码工作几个小时,似乎无法弄清楚我做错了什么或我可能搞砸了什么,我从一个有效的示例页面复制了这段代码并对其进行了修改以制作我想要构建的表格。

原始剪辑代码:

$(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,以帮助展示我是如何在每个人的帮助下设置它的......再次感谢大家!!

$(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]+'"

演示

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

第二,为什么要在for之后$(function() {?错了。如果要使用它,则必须用});关闭它

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