动态创建的 table 仅显示最后附加的 table 数据

Question

我正在使用 Javascript，其中我有一个从数组（流名称列表）派生的下拉列表，每当这个数组选择发生变化时（onchange()） array( attributes and types) 应该从两个数组（两个 1d arrays- attributes, type）派生，并以 table 形式显示在下拉列表下方。我已经编写了在一个分区中显示 table 的函数，但它只检索最后一个数据对并将其附加到 table。但是我需要将数组中的所有数据显示在每一列中，以便它们看起来好像彼此对应。

创建主数组的JS函数：

//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 函数：

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 函数创建 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 1

问题仅出在我动态生成 table 的函数上。如问题所示，我仅在末尾将 row(tr) 附加到 tablebody 。这会导致仅将最后保存的数据对行附加到 table。因此，为了让每一行都被追加：一旦每个 table 数据（td）被追加到一行（tr），那个特定的 tr 需要被追加到 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";

        }

动态创建的 table 仅显示最后附加的 table 数据

Dynamically created table only displays last appended table data

javascript

arrays

jquery

element

html-table