javascript - 使用 JavaScript DOM 创建 HTML 表格

Question

手头的任务是根据通过其 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>

Answer 1

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

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

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