Creating an HTML Table with JavaScript DOM

The task at hand is to dynamically create an HTML table from variable values passed to a new page through its URL. The HTML table needs four columns: Product Name, Item Number, Price, and Quantity.

I am using the开发者_高级运维 JavaScript DOM to accomplish this task. However, I cannot get my code to work properly because I think I am misusing the tBodies[0].appendChild(tr) method. I can only get the last column in my table to display. The first 3 columns do not display. Any ideas where I've gone wrong?

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

Every time you have an input, you need to create new input and td elements:

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

You don't need to "var" again, and you can continue using your existing tr object.

I think the problem may be that you're only just constantly overwriting the values of your one 'input' and 'td', but you should have a distinct 'td' and 'input' for each column.