Internet Explorer Javascript/ Dom Object add rows problem

Question

Here is my Javascript code :

function generate(choice)
{
    if(choice==1)
    {

        charge++;


        var new_row=document.createElement("tr");
        var name="row"+charge;      
        new_row.setAttribute("name",name);
        new_row.setAttribute("id",name);

        var col1=document.createElement("td");
        var col2=document.createElement("td");
        var col3=document.createElement("td");
        var col4=document.createElement("td");

        col1.setAttribute("width","205");
        col2.setAttribute("width","191");
        col3.setAttribute("width","182");       
        col4.setAttribute("width","127");

        var list1=document.getElementById("rep0").cloneNode(true);
        id="rep"+charge;

        list1.setAttribute("id",id);

        var list2=document.getElementById("item0").cloneNode(true);
        name="items[]";
        list2.setAttribute("name",name);
        id="item"+charge;
        list2.setAttribute("id",id);
        list2.setAttribute("onChange","match_row(this.id);");


//      clone_nodes(list2,"item0");

        var text=document.createElement("input");
        name="minutes[]";
        text.setAttribute("name",name);
        text.setAttribute("value","15");
        id="minutes"+charge;
        text.setAttribute("id",id);
        text.setAttribute("type","text");

        var text2=document.createElement("input");
        name="charges[]";
        text2.setAttribute("name",name);
        text2.setAttribute("value","28.00");
        id="charges"+charge;
        text2.setAttribute("id",id);
        text2.setAttribute("type","text");
        //text2.setAttribute("onChange","charge_calculator();");

        col1.appendChild(list1);
        col2.appendChild(list2);
        col3.appendChild(text);
        col4.appendChild(text2);

        new_row.appendChild(col1);
        new_row.appendChild(col2);
        new_row.appendChild(col3);
        new_row.appendChild(col4);

        charges1=document.getElementById("charges");
        charges1.appendChild(new_row);

        final_charge=charge;


    }
    else if(choice==2)
    {

        payment++;
        var new_row2=document.createElement("tr");


        var col11=document.createElement("td");
        var col22=document.createElement("td");
        var col33=document.createElement("td");

        col11.setAttribute("width","205");
        col22.setAttribute("width","206");
        col33.setAttribute("width","297");      


        var list11=document.createElement("select");
        name="payment_type[]";
        list11.setAttribute("name",name);
        id="payment_type"+payment;
        list11.setAttribute("id",id);
        list11.setAttribute("onChange","set_payment_type(this.id);");
        clone_nodes(list11,"payment_type0");

        var text1=document.createElement("input");
        text1.setAttribute("type","text");
        name="amount[]";
        text1.setAttribute("name",name);
        id="amount"+payment;
        text1.setAttribute("id",id);


        var list22=document.createElement("select");
        name="account[]";
        list22.setAttribute("name",name);
        id="account"+payment;
        list22.setAttribute("id",id);
        list22.setAttribute("onChange","correspond2(this.id);");
        clone_nodes(list22,"account0");


        col11.appendChild(list11);
        col22.appendChild(text1);
        col33.appendChild(list22);

        new_row2.appendChild(col11);
        new_row2.appendChild(col22);
        new_row2.appendChild(col33);


        charges2=document.getElementById("payments");
        charges2.appendChild(new_row2);
        final_payment=payment;

    }

}

And here is the html button code with which I'm calling

<input type="button" name="Add More" id="Add More" value="Add More" onClick="generate(1);" />

Everything is working like a charm in all other browsers Except Internet Explorer please help me I'm stuck. I have work out out for IE also.

Answer 1

For your own sanity, use a library like jQuery to achieve this kind of things.

Answer 2

Please, do not use the appendChild method to add rows to a table, or cells to a table row. So you will avoid the need of explicitly creating a TBODY element, appending it to the table, then creating and appending TR elements to that TBODY.

There are standard DOM methods that are specifically intended for this use. Namely:

1.) var newRow = myTable.insertRow(index)
Inserts and returns a new empty row (TR element) at the given index.

2.) myTable.deleteRow(index)
Deletes the row at the given index.

3.) var newCell = myRow.insertCell(index)
Inserts and returns a new empty cell (TD element) at the given index.

4.) myRow.deleteCell(index)
Deletes the cell at the given index.

All those methods normally throw an error if the index argument is out of range. However in some browsers like IE8 the index is optional and if it is omitted the cell or row will be inserted or removed at the end of its parent.

Answer 3

Your code isn't very clear but I think you will append the tr elements to table. But you can't append a tr directly to a table in ie. You need to create a tbody element first add this to table and append then your tr to the tbody element.