热门使用ajax动态添加行?

时间:2012-11-02 12:12:08

标签: php javascript html ajax

我有两个文本框,它使用AJAX存储在数据库中。但我想在表结构中返回新添加的行。

我正在使用这个概念添加产品来销售。当我想添加一个项目时,它将以表格网格格式显示。

这是我的AJAX代码。

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

在我的html页面中,我创建了一个表格结构,即头部。

在我的PHP文件中,我使用echo语句以html行格式返回整个插入的行。

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

我的疑问是如何在表格中显示该行。如果我在PHP代码中编写整个表结构,那么它将正常工作。但我不想一直做到返回整行。

请帮帮我。

1 个答案:

答案 0 :(得分:1)

您可以使用Javascript动态地向表中添加行:

    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