Tara Wilfred Tara Wilfred - 1 month ago 5
jQuery Question

Dynamically created table only displays last appended table data

I am working with Javascript where I've got a drop down list derived from an array (List of stream names) and whenever this array selection changes (

onchange()
) the details of the array( attributes and types) should be derived from two arrays (two 1d arrays- attributes, type) and displayed in a table form below the dropdown. I've written the function that displays the table within a division but it retrieves only the last data pair and appends it to the table. But I need all the data from the arrays to be displayed in each column so that they look as if they correspond each other.

JS Function to create the main array:

//Generate array to hold predefined Stream Definitions
function PredefinedStreams() {
var StreamArray = new Array(3);
for (var q = 0; q < 3; q++)
{
StreamArray[q] = new Array(4);
for (var w=1; w<3; w++)
{
StreamArray[q][w] = new Array(5);
}
}

StreamArray[0][0]="Stream1";
StreamArray[0][1][0]="1_attr1";
StreamArray[0][1][1]="1_attr2";
StreamArray[0][1][2]="1_attr3";
StreamArray[0][1][3]="1_attr4";
StreamArray[0][1][4]="1_attr5";
StreamArray[0][2][0]="1_type1";
StreamArray[0][2][1]="1_type2";
StreamArray[0][2][2]="1_type3";
StreamArray[0][2][3]="1_type4";
StreamArray[0][2][4]="1_type5";
StreamArray[0][3] = "define stream Stream1 (1_attr1 1_type1, 1_attr2 1_type2, 1_attr3 1_type3, 1_attr4 1_type4, 1_attr5 1_type5 );";

StreamArray[1][0]="Stream2";
StreamArray[1][1][0]="2_attr1";
StreamArray[1][1][1]="2_attr2";
StreamArray[1][1][2]="2_attr3";
StreamArray[1][1][3]="2_attr4";
StreamArray[1][1][4]="2_attr5";
StreamArray[1][2][0]="2_type1";
StreamArray[1][2][1]="2_type2";
StreamArray[1][2][2]="2_type3";
StreamArray[1][2][3]="2_type4";
StreamArray[1][2][4]="2_type5";
StreamArray[1][3] = "define stream Stream2 (2_attr1 2_type1, 2_attr2 2_type2, 2_attr3 2_type3, 2_attr4 2_type4, 2_attr5 2_type5 );";

StreamArray[2][0]="Stream3";
StreamArray[2][1][0]="3_attr1";
StreamArray[2][1][1]="3_attr2";
StreamArray[2][1][2]="3_attr3";
StreamArray[2][1][3]="3_attr4";
StreamArray[2][1][4]="3_attr5";
StreamArray[2][2][0]="3_type1";
StreamArray[2][2][1]="3_type2";
StreamArray[2][2][2]="3_type3";
StreamArray[2][2][3]="3_type4";
StreamArray[2][2][4]="3_type5";
StreamArray[2][3] = "define stream Stream3 (3_attr1 3_type1, 3_attr2 3_type2, 3_attr3 3_type3, 3_attr4 3_type4, 3_attr5 3_type5 );";


return StreamArray;
}


JS Function to retrieve individual stream data onto arrays:

var streams = '<select id="streamSelect" onchange="showStreamDef()">', streamtypes = PredefinedStreams();
var streamDef = streamtypes = PredefinedStreams();
var stream1_attr = streamtypes = PredefinedStreams();
var stream1_type = streamtypes = PredefinedStreams();
var stream2_attr = streamtypes = PredefinedStreams();
var stream2_type = streamtypes = PredefinedStreams();
var stream3_attr = streamtypes = PredefinedStreams();
var stream3_type = streamtypes = PredefinedStreams();
var PredefinedStreamComboDiv=document.createElement('div');
function createattr()
{
for (var q = 0; q < 3; q++)
{
streams += "<option value='"+streamtypes[q][0]+"'>"+streamtypes[q][0]+"</option>";
streamDef += streamtypes[q][3];
for (var w=0; w<3; w++)
{
for(var r=0; r<5;r++)
{
if(q==0 && w==1)
{
stream1_attr[r] = streamtypes[q][w][r];
}
if(q==0 && w==2)
{
stream1_type[r] = streamtypes[q][w][r];
}

if(q==1 && w==1)
{
stream2_attr[r]= streamtypes[q][w][r];
}
if(q==1 && w==2)
{
stream2_type [r]= streamtypes[q][w][r];
}
if(q==2 && w==1)
{
stream3_attr [r]= streamtypes[q][w][r];
}
if(q==2 && w==2)
{
stream3_type [r]= streamtypes[q][w][r];
}
}
}


}
streams += '</select>';
//streamDef += '</select>';
PredefinedStreamComboDiv.className="attr-combobox-style";
PredefinedStreamComboDiv.innerHTML= streams;
PredefinedStream.appendChild(PredefinedStreamComboDiv);


}


JS Function to create the table:

function showStreamDef()
{
alert("Displaying Stream Details");

var choice=document.getElementById("streamSelect");
var selectedStr = choice.options[choice.selectedIndex].text;

var myTableDiv = document.getElementById("streamDefDiv");
var table = document.createElement('TABLE');
var tableBody = document.createElement('TBODY');

table.border = '1';
table.appendChild(tableBody);

var tr = document.createElement('TR');
var td = document.createElement('TD');
td.appendChild(document.createTextNode("Attribute"));
tr.appendChild(td);
var td = document.createElement('TD');
td.appendChild(document.createTextNode("Type"));
tr.appendChild(td);

if(selectedStr=="Stream1")
{

for (var d = 0; d < stream1_attr.length; d++)
{
var tr = document.createElement('TR');
var td = document.createElement('TD');
td.appendChild(document.createTextNode(stream1_attr[d]));
tr.appendChild(td);
var td = document.createElement('TD');
td.appendChild(document.createTextNode(stream1_type[d]));
tr.appendChild(td);
}

}

else if(selectedStr=="Stream2")
{
for (var d = 0; d < stream1_attr.length; d++)
{
var tr = document.createElement('TR');
var td = document.createElement('TD');
td.appendChild(document.createTextNode(stream2_attr[d]));
tr.appendChild(td);
var td = document.createElement('TD');
td.appendChild(document.createTextNode(stream2_type[d]));
tr.appendChild(td);
}
}

else
{
for (var d = 0; d < stream1_attr.length; d++)
{
var tr = document.createElement('TR');
var td = document.createElement('TD');
td.appendChild(document.createTextNode(stream3_attr[d]));
tr.appendChild(td);
var td = document.createElement('TD');
td.appendChild(document.createTextNode(stream3_type[d]));
tr.appendChild(td);
}
}

tableBody.appendChild(tr);
myTableDiv.appendChild(table);

document.getElementById('streamDefDiv').style.display = "block";

}

Answer

The issue was only with the function where I dynamically generate the table. As shown in the question, I've appended the row(tr) to the tablebody only at the end. This causes only the last saved data pair row to be appended to the table. So in order to get each row to be appended: once each table data(td) is appended to a row( tr), that particular tr needs to be appended to the tablebody.

function showStreamDef()
        {

            var choice=document.getElementById("streamSelect");
            var selectedStr = choice.options[choice.selectedIndex].text;

            var myTableDiv = document.getElementById("streamDefDiv");
            var table = document.createElement('TABLE');
            var tableBody = document.createElement('TBODY');

            table.border = '1';
            table.appendChild(tableBody);

            var tr = document.createElement('TR');
            var td = document.createElement('TD');
            td.appendChild(document.createTextNode("Attribute"));
            tr.appendChild(td);
            var td = document.createElement('TD');
            td.appendChild(document.createTextNode("Type"));
            tr.appendChild(td);
            tableBody.appendChild(tr);

            if(selectedStr=="Stream1")
            {

                for (var d = 0; d < stream1_attr.length; d++)
                {
                    var tr = document.createElement('TR');
                    var td = document.createElement('TD');
                    td.appendChild(document.createTextNode(stream1_attr[d]));
                    tr.appendChild(td);
                    var td = document.createElement('TD');
                    td.appendChild(document.createTextNode(stream1_type[d]));
                    tr.appendChild(td);
                    tableBody.appendChild(tr);
                }

            }

            else if(selectedStr=="Stream2")
            {
                for (var d = 0; d < stream1_attr.length; d++)
                {
                    var tr = document.createElement('TR');
                    var td = document.createElement('TD');
                    td.appendChild(document.createTextNode(stream2_attr[d]));
                    tr.appendChild(td);
                    var td = document.createElement('TD');
                    td.appendChild(document.createTextNode(stream2_type[d]));
                    tr.appendChild(td);
                    tableBody.appendChild(tr);
                }
            }

            else
            {
                for (var d = 0; d < stream1_attr.length; d++)
                {
                    var tr = document.createElement('TR');
                    var td = document.createElement('TD');
                    td.appendChild(document.createTextNode(stream3_attr[d]));
                    tr.appendChild(td);
                    var td = document.createElement('TD');
                    td.appendChild(document.createTextNode(stream3_type[d]));
                    tr.appendChild(td);
                    tableBody.appendChild(tr);
                }
            }


            myTableDiv.appendChild(table);

            document.getElementById('streamDefDiv').style.display = "block";

        }
Comments