Save dynamically created table data to multidimensional array

Question

I have a dynamically created table and I need to retrieve the values from that to be stored in a multidimensional array as shown below

But I am getting an exception/error saying "Cannot set property of 0 to undefined"

My JS Function:

var DefAttrArray = new Array(100);

    function storeDefinedStreamInfo(newAgent,i,e,ui)
    {
        var StrName= document.getElementById("StreamNameInput").value;
        var StreamElementID = i;
        var table = document.getElementById('attrtable');
        var tblerows = (table.rows.length)-1;
        // DefAttrArray[i] = new Array(3);
        // for (var w=3; w<3; w++)
        // {
        //     DefAttrArray[q][w] = new Array(tblerows);
        // }
        for (r = 1; r < table.rows.length; r++) {
            for(var c=0; c<1;c++) {
                var attrNm = table.rows[r].cells[c].innerHTML;
                var attrTp = table.rows[r].cells[1].innerHTML;
                createdDefinedStreamArray[i-1][2][r-1]= new Array(2);
                createdDefinedStreamArray[i-1][2][r-1][0]=attrNm;
                createdDefinedStreamArray[i-1][2][r-1][1]=attrTp;
                alert(createdDefinedStreamArray[i-1][2][r-1][0] + "\n" + createdDefinedStreamArray[i-1][2][r-1][1]);
            }

        }

        createdDefinedStreamArray[i-1][0]=StreamElementID;
        createdDefinedStreamArray[i-1][1]=StrName;
        createdDefinedStreamArray[i-1][2]=new Array(tblerows);
        createdDefinedStreamArray[i-1][3]="Defined Stream";

        alert("createdDefinedStreamArray[i-1][2][w][0] : "+ createdDefinedStreamArray[i-1][2][w][0]);

        var prop = $('<a class="streamproperty" onclick="doclickExp(this)"><b><img src="../Images/settings.png"></b></a> ').attr('id', (i));
        var showIcon = $('<img src="../Images/Defined.png"></b></a> ').attr('id', (i));
        newAgent.text(StrName).append('<a class="boxclose" id="boxclose"><b><img src="../Images/Cancel.png"></b></a> ').append(showIcon).append(prop);
        dropCompleteElement(newAgent,e,ui);
    }

Answer 1

Finally, got it to work.

var DefAttrArray = new Array(100);

    function storeDefinedStreamInfo(newAgent,i,e,ui)
    {
        var StrName= document.getElementById("StreamNameInput").value;
        var StreamElementID = i;
        var table = document.getElementById('attrtable');
        var tblerows = (table.rows.length)-1;
        createdDefinedStreamArray[i][2]=new Array(tblerows);


        for (r = 1; r < table.rows.length; r++) {
            for(var c=0; c<1;c++) {
                var attrNm = table.rows[r].cells[c].innerHTML;
                var attrTp = table.rows[r].cells[1].innerHTML;
                createdDefinedStreamArray[i][2][r-1]= new Array(2);
                createdDefinedStreamArray[i][2][r-1][0]=attrNm;
                createdDefinedStreamArray[i][2][r-1][1]=attrTp;
            }

        }

        createdDefinedStreamArray[i][0]=StreamElementID;
        createdDefinedStreamArray[i][1]=StrName;
        createdDefinedStreamArray[i][3]="Defined Stream";
        createdDefinedStreamArray[i][4]= tblerows;

        var prop = $('<a class="streamproperty" onclick="doclickDefine(this)"><b><img src="../Images/settings.png"></b></a> ').attr('id', (i));
        var showIcon = $('<img src="../Images/Defined.png"></b></a> ').attr('id', (i));
        newAgent.text(StrName).append('<a class="boxclose" id="boxclose"><b><img src="../Images/Cancel.png"></b></a> ').append(showIcon).append(prop);
        dropCompleteElement(newAgent,e,ui);
    }