4

検索データを 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 は機能します。テストしました。ご覧のとおり、そのデータを「検索」のIDを持つdivにinnerHTMLしようとしています。div はテーブル内に入ることができないため、機能しているとは思いません。私はjs insertRowとjqueryを使用しましたが、入力するとsearch_member.phpから返されたデータは毎回異なり、js insertRowとjqueryは行を追加し続けるだけで500行になります。テーブルの最後の < /tr> の直後に search_member.php に返されたデータを挿入する方法が必要です。

ご助力いただきありがとうございます。

4

1 に答える 1

2

コメントはほとんどそれを示唆していますが、とにかく、最初の行が検索間でそのままであってはならない理由はわかりません。を使用してセマンティックを追加するのに最適なケースのようにも見えます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;
于 2012-10-26T08:59:02.673 に答える