使用 JavaScript DOM 创建 HTML 表格答案

【问题标题】：Creating an HTML Table with JavaScript DOM使用 JavaScript DOM 创建 HTML 表格
【发布时间】：2011-07-12 06:26:35
【问题描述】：

手头的任务是根据通过 URL 传递到新页面的变量值动态创建 HTML 表。 HTML 表格需要四列：Product Name、Item Number、Price 和 Quantity。

我正在使用 JavaScript DOM 来完成这项任务。但是，我无法让我的代码正常工作，因为我认为我在滥用 tBodies[0].appendChild(tr) 方法。我只能显示表中的最后一列。前 3 列不显示。有什么想法我哪里出错了吗？

<FORM NAME=order ACTION=submit.php METHOD=GET>
<TABLE ID=gradient-style SUMMARY=EuroClassic Dynamic Ordering>
<THEAD>
<TR>
<TH scope=col>Product</th>
<TH scope=col>Item #</th>
<TH scope=col>Price</th>
<TH scope=col>Quantity</th>
</TR>
</THEAD>
<TBODY>

<SCRIPT language=javascript>

var vars = [], hash;
var hashes = window.location.href.slice(window.location.href.indexOf('?') + 1).split('&');

var i = 0;

while(i < hashes.length)
{
    hash = hashes[i].split('=');

    vars.push(hash[0]);
    vars[hash[0]] = hash[1];

    // hasQuantity Array created to test if the Quantity Variable
    // is zero or not...is product ordered?

    var hasQuantity = new Array();
    hasQuantity = hashes[i+4].split('=');

        // hasQuantity != 0 indicates product has been ordered...

        if(hasQuantity[1] != 0)
        {
            var nameProduct = hashes[i].split('=');

            var tr = document.createElement('tr');
            var td = document.createElement('td');
            var input = document.createElement('input');

            input.type = "text";
            input.size = 40;
            input.name = nameProduct[0];

                nameProduct[1] = nameProduct[1].replace(/%/g,'');
                nameProduct[1] = nameProduct[1].replace(/2C/g,'');
                nameProduct[1] = nameProduct[1].replace(/2F/g,'');
                nameProduct[1] = nameProduct[1].replace(/28/g,'');
                nameProduct[1] = nameProduct[1].replace(/29/g,'');
                nameProduct[1] = nameProduct[1].replace(/\+/g," ");

            input.value = nameProduct[1];
            input.readOnly = true;

            td.appendChild(input);
            tr.appendChild(td);

            document.getElementById('gradient-style').tBodies[0].appendChild(tr);

            i++;

            var nameItem = hashes[i].split('=');                

            input.type = "text";
            input.size = 6;
            input.name = nameItem[0];
            input.value = nameItem[1];
            input.readOnly = true;

            td.appendChild(input);
            tr.appendChild(td);

            document.getElementById('gradient-style').tBodies[0].appendChild(tr);

            i = i+4;

            var namePrice = hashes[i].split('=');

            input.type = "text";
            input.size = 6;
            input.name = namePrice[0];
            input.value = namePrice[1];
            input.readOnly = true;

            td.appendChild(input);
            tr.appendChild(td);

            document.getElementById('gradient-style').tBodies[0].appendChild(tr);

            i++;

            var nameQuantity = hashes[i].split('=');

            input.type = "text";
            input.size = 6;
            input.name = nameQuantity[0];
            input.value = nameQuantity[1];
            input.readOnly = true;

            td.appendChild(input);
            tr.appendChild(td);

            document.getElementById('gradient-style').tBodies[0].appendChild(tr);


            i++;

        }

        //If Quantity Ordered is Zero, Proceed to next set of variables

        else
        {
            i=i+7;
        }
}

</SCRIPT>


</TBODY>
</TABLE>
</FORM>

【问题讨论】：

标签： javascript dom dynamic-data

【解决方案1】：

我认为问题可能在于您只是不断地覆盖您的一个“输入”和“td”的值，但您应该为每一列有一个不同的“td”和“输入”。

【讨论】：

【解决方案2】：

每次有输入时，都需要创建新的 input 和 td 元素：

td = document.createElement("td");
input = document.createElement("input");

您不需要再次“var”，您可以继续使用现有的 tr 对象。

【讨论】：

哇，这很简单。我非常感谢你的帮助，大卫。干杯。