使用innerHTML向表格添加行

Question

我正在从一个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>

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

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

search_member.php已经测试过了，可以正常运行。如您所见，我试图将该数据的innerHTML插入到id为“search”的div中。我认为这不起作用，因为div无法放在表格中。我已经使用了js insertRow和jquery，但是由于每次输入的数据都不同，js insertRow和jquery仅会不断添加行，最终导致500行。我只需要一种方法，在我的表格中最后一个</tr>之后插入从search_member.php返回的数据。

感谢您的帮助。

- user1658688

---

你能不能把 <div id="search"> 替换成 <tbody id="search">？ - biziclop

太棒了，它起作用了，但是它清除了我的输入和标题。也许如果我将它们更改为<th>而不是<td>会有所改善。 - user1658688

没有用。仍然擦除了所有的标题和输入。 - user1658688

没用的。我不知道你可以添加2个<tbody>标签。 - user1658688

tbody、thead、tfoot，您可以根据需要添加任意数量。非常适合分组。 - biziclop

Answer 1

这段话几乎已经表明了意思，但无论如何：我认为在搜索之间第一行没有理由不保持原样。此外，使用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>

使用多个 tbody 元素是有效的HTML5/XHTML，但在这种情况下我认为这并不必要。当 element_id 设置为 "result-rows" 时（注意 +=），这将完美地工作：

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

- madr