如何使用php和ajax回显出现在<table> </table>中

时间:2014-12-12 08:17:03

标签: php html ajax

我目前正在研究ajax和php。我想要做的是从php文件中回显表行。这是我的代码。

HTML代码:

<table  class = "table table-hover table-striped">
    <tr>
        <th>Product ID</th>
        <th>Product Name</th> 
        <th>Price</th> 
        <th>Terms</th>
    </tr>

<-- I want the new table row to appear here -->

</table>

PHP代码

<?php
    $x = 10;

    while($x > 0)
    {

        echo '<tr>
                    <td>'.$x.'</td>
                    <td>'.$x.' Name</td> 
                    <td>'.$x.' Pesos</td> 
                    <td>'.$x.' Years</td>
           </tr>';

        $x--;
    }
?>

Ajax脚本

<script>
function showDetails()
{
     var xmlhttp;

     if (window.XMLHttpRequest)
    {// code for IE7+, Firefox, Chrome, Opera, Safari
        xmlhttp=new XMLHttpRequest();
    }
    else
    {// code for IE6, IE5
        xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
    }

    xmlhttp.onreadystatechange=function()
    {
         if (xmlhttp.readyState==4 &&     xmlhttp.status==200)
         {
          document.getElementById("myNewTableRow").innerHTML=xmlhttp.responseText;
         }
    }
      xmlhttp.open("POST","sample-php-ajax.php",true);
      xmlhttp.send();
    }
</script>

在哪里放 ID 以便我可以使用ajax调用它时可以显示php文件想要回显的内容?

2 个答案:

答案 0 :(得分:2)

在表格中,您可以使用例如如果使用jQuery。

 $('#tableid').append($yourtr);

即使您稍后排序,我也会将您的标题放在<thead>标记中以保持最佳状态。

没有jQuery,你可以使用

 document.getElementById('tableid').appendChild(yourtr);

答案 1 :(得分:0)

您可以使用以下代码

<table id="result" class = "table table-hover able-striped"> // add ID here
在ajax中获取数据并通过

将其附加到表中
document.getElementById("result").appedChild(xmlhttp.responseText)