动态创建的表只显示最后追加的表数据答案

【问题标题】：Dynamically created table only displays last appended table data动态创建的表只显示最后追加的表数据
【发布时间】：2016-06-17 05:22:49
【问题描述】：

我正在使用 Javascript，其中我有一个从数组（流名称列表）派生的下拉列表，并且每当此数组选择更改（onchange()）时，数组的详细信息（属性和类型）应该是派生自两个数组（两个 1d 数组 - 属性、类型）并以表格形式显示在下拉列表下方。我编写了在一个部门中显示表格的函数，但它只检索最后一个数据对并将其附加到表格中。但是我需要将数组中的所有数据显示在每一列中，以便它们看起来好像彼此对应。

创建主数组的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函数：

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

        }

【问题讨论】：

请更新您的完整代码，您的某些代码丢失了。 stream1_attr 这是你定义的这是什么
正如我在问题中提到的，它是一个简单的一维数组（包含 5 个元素），需要放在表格的一列中，并且 attr_type 数组（也是一维数组）需要被带到表格的下一列。无论如何，我将添加这些。谢谢
最好创建一个 fiddle 或 plunker，它会很容易修复
好吧，我必须做更多的调整才能让它在 fiddler 上运行。在这一点上，我宁愿有一个简单的解决方案
解决了，我把答案贴在下面

标签： javascript jquery arrays html-table element

【解决方案1】：

问题仅在于我动态生成表格的功能。如问题所示，我仅在最后将 row(tr) 附加到 tablebody 。这会导致仅将最后保存的数据对行附加到表中。因此，为了让每一行都被附加：一旦每个表数据（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";

        }

【讨论】：