CODEWITHSUNDEEP
phpjavascripthtmlajax
Manoranjan Jena
Manoranjan Jena

Reputation: 79

Hot to add a row dynamically using ajax?

I have two text box which is storing in database using AJAX. But I want to return back the new added row in table structure.

I am using this concept in add product to sell . when I want to add an item then it will be display in a tabular grid format.

This is my AJAX code. 

    var xmlHttp
    function newVendorGridInital()
    {
    //alert("HI");
    xmlHttp=GetXmlHttpObject()
    if (xmlHttp==null)
     {alert ("Browser does not support HTTP Request"); return } 

    var  item= document.getElementById('itemcode').value;
    var url="ajax_NewVendorGrid.php"
    url=url+"?itm="+item; // For multiple value send.

    url=url+"&sid="+Math.random()

    xmlHttp.onreadystatechange=newVendorGrid
    xmlHttp.open("GET",url,true)
    xmlHttp.send(null)
} 

function newVendorGrid() 
{ 
if (xmlHttp.readyState==4 || xmlHttp.readyState=="complete")
 {
    document.getElementById("GridRuntimeData").innerHTML=xmlHttp.responseText;
           > > > I didn't understand how to target the id field > > > GridRuntimeData 
 } 
}

In my html page I have created a table structure i.e. head part.

In my PHP file I am returning the entire inserted row in a html row format using echo statement. 

    <?php   
     echo "<tr><td>".$item."</td></tr>";
    ?>

and my doubt is how to show that row in table. If I write entire table structure in php code then it will be working fine. But i don't want do all the time to return entire row.

Please Help me.

Upvotes: 1

Views: 440

Answers (1)

MrCode
MrCode

Reputation: 64526

You can dynamically add rows to a table with Javascript like this:

    var table = document.getElementById("mytable");

    var td = document.createElement('td');
    td.innerHTML = 'new row';

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

    table.appendChild(tr);

jsFiddle demo here

Upvotes: 1

Related Questions