Monday, 25 June 2012

Dynamically Creating HTML Tags using DOM

Table With One Row And Five Columns

<table id="myTable" width="100%">                    
            <tr>
                <td class="big">ProductName</td>
                <td class="small">Mrp</td>
                <td class="small">Rate</td>
                <td class="small">Qty</td>
                <td class="small">Total</td>
            </tr>                
            <tr>
                <td width="400px">
                    <select id="ProductName"   name="ProductName"  onchange="getValue('')"  >
                     </select>
                    <input type="hidden" id="ProductName_hidden" name="ProductName_hidden[]" ></td>
                <td><input type="text"   name="Mrp[]" id="Mrp" ></td>
                <td><input type="text"   name="Rate[]" id="Rate" ></td>
                <td><input type="text"   name="Qty[]" id="Qty" onkeyup="getsubTotal('')" /></td>
                <td><input type="text"   name="Total[]" /></td>
                <td><input type="button"  value="+"  onclick="add()"/></td>
            </tr>
</table>

Javascript For Adding Rows Dtynamicaly

function add()
{
        rl=document.getElementById("myTable").rows.length;
        var a=document.getElementById("myTable").insertRow(rl);
        var h=a.insertCell(0);
        var g=a.insertCell(1);
        var f=a.insertCell(2);   
        var m=a.insertCell(3);   
        var n=a.insertCell(4);
        var o=a.insertCell(5);
       
h.innerHTML='<select  name="ProductName'+rl+'" id="ProductName'+rl+'" onchange="getValue('+rl+')" ></select><input type="hidden" id="ProductName'+rl+'_hidden" name="ProductName_hidden[]" >';
g.innerHTML='<input type="text" name="Mrp[]" id="Mrp'+rl+'"/>';
f.innerHTML='<input type="text" name="Rate[]" id="Rate'+rl+'"  />';
m.innerHTML='<input type="text"  name="Qty[]" id="Qty'+rl+'" onkeyup="getsubTotal('+rl+')" />';
n.innerHTML='<input type="text"  name="Total[]" id="Total'+rl+'" />';
o.innerHTML='<input type="button"  value="-" onclick="deletee('+rl+')"/>';   
}

Javascript For Deleing Rows Dtynamicaly 

function deletee()
{
        r=document.getElementById("myTable").rows.length;
            if(r!=2)
            {
                document.getElementById("myTable").deleteRow(r-1)
            }
            fullTotal();
}