Javascript 使用innerHTML向表中添加行

我从一个php mysql服务器中提取搜索数据，并希望将其显示在一个表中。这是我到目前为止编写的代码

function getrows(page, parameters, element_id)
{
if (parameters.length==0)
{ 
    document.getElementById(element_id).innerHTML="";
    return;
}
xmlhttp=new XMLHttpRequest();
xmlhttp.onreadystatechange=function()
{
    if (xmlhttp.readyState==4 && xmlhttp.status==200)
    {
        document.getElementById(element_id).innerHTML=xmlhttp.responseText;
    }
}
xmlhttp.open("GET",page + "?" + parameters,true);
xmlhttp.send();
}

<table style="text-align: left; width: 0%; margin-left: auto; margin-right: auto;" border="1" cellpadding="2" cellspacing="0">
<tbody>
<tr style="background-color:#d0e4fe;">
    <td>First Name:</td>
    <td>Last Name:</td>
    <td>Date of Birth:</td>
    <td>Phone Number:</td>
    <td>Action:</td>
</tr>
<tr>
    <td><input onkeyup="getrows('actions/search_member.php', 'first_name=' + getvalue('first_name') + '&last_name=' + getvalue('last_name') + '&birth_date=' + getvalue('birth_date') + '&home_phone=' + getvalue('home_phone'), 'search');" name="first_name"></td>
    <td><input onkeyup="getrows('actions/search_member.php', 'first_name=' + getvalue('first_name') + '&last_name=' + getvalue('last_name') + '&birth_date=' + getvalue('birth_date') + '&home_phone=' + getvalue('home_phone'), 'search');" name="last_name"></td>
    <td><input onkeyup="getrows('actions/search_member.php', 'first_name=' + getvalue('first_name') + '&last_name=' + getvalue('last_name') + '&birth_date=' + getvalue('birth_date') + '&home_phone=' + getvalue('home_phone'), 'search');" name="birth_date"></td>
    <td><input onkeyup="getrows('actions/search_member.php', 'first_name=' + getvalue('first_name') + '&last_name=' + getvalue('last_name') + '&birth_date=' + getvalue('birth_date') + '&home_phone=' + getvalue('home_phone'), 'search');" name="home_phone"></td>
    <td></td>
</tr>
<div id="search"></div>
</tbody>

函数getrows（页面、参数、元素id）
{
if（parameters.length==0）
{ 
document.getElementById（element_id）.innerHTML=“”；
返回；
}
xmlhttp=新的XMLHttpRequest（）；
xmlhttp.onreadystatechange=函数（）
{
if（xmlhttp.readyState==4&&xmlhttp.status==200）
{
document.getElementById（element_id）.innerHTML=xmlhttp.responseText；
}
}
open（“GET”，page+“？”+参数，true）；
xmlhttp.send（）；
}
名字：
姓氏：
出生日期:
电话号码：
行动：

search_member.php根据以下格式输入的内容返回5个成员的列表：

 <tr>
    <td>data</td>
    <td>data</td>
    <td>data</td>
    <td>data</td>
    <td>data</td>
 </tr>

数据
数据
数据
数据
数据

我已经测试过search_member.php。正如你所看到的，我正试图用id“search”将该数据嵌入到div中。我认为它不起作用，因为一个div不能进入一张桌子。我使用过js insertRow和jquery，但当您键入从search_member.php返回的数据时，每次都是不同的，js insertRow和jquery只是不断添加行，您得到500行。我只需要它在我的表中的最后一个之后插入为search_member.php返回的数据

---

谢谢你的帮助。

评论几乎暗示了这一点，但无论如何：我看不出为什么在两次搜索之间第一行不完整。它看起来也是使用

thead

添加语义的完美案例：

<thead>
  <tr style="background-color:#d0e4fe;">
    <td>First Name:</td>
    <td>Last Name:</td>
    <td>Date of Birth:</td>
    <td>Phone Number:</td>
    <td>Action:</td>
  </tr>
</thead>
<tbody id="result-rows">
  <!-- the area which is populated by rows -->
</tbody>

---

你不能用

替换

吗？很酷，但它清除了我的输入和标题。也许如果我把它们改成而不是。不行。仍然删除了所有的标题和输入。不，它确实有效。我不知道你可以添加2个标签。tbody，thead，tfoot你可以添加任意多的标签。非常适合分组。

document.getElementById(element_id).innerHTML += xmlhttp.responseText;