CODEWITHSUNDEEP
javascripthtmlcss
user1658688
user1658688

Reputation: 77

add rows to a table using innerHTML

I'm pulling search data form a php mysql server and want to display it in a table. here is the code i have worked up so far.

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>

the search_member.php returns a list of 5 members according to what is entered in to the inputs in this format: 

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

search_member.php works i have tested it. as you can see im trying to innerHTML that data to the div with the id of "search". I dont think it is working because a div can not go inside a table. i have used js insertRow and jquery but as you type that data returned form search_member.php is different each time and js insertRow and jquery just keep adding rows and you get 500 rows. i just need a way it insert the data returned for search_member.php just after the last < /tr> in my table.

Thanks for all your help.

Upvotes: 4

Views: 5618

Answers (1)

madr
madr

Reputation: 665

The comments almost suggests it, but anyway: I see no reason why the first row should not be intact between searches. It also looks like a perfect case for adding semantic by using a 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>

It is valid HTML5/XHTML to use more than 1 tbody element, but IMHO it is not necessary in this case. This will work just fine when element_id is set to "result-rows" (notice the +=):

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

Upvotes: 3

Related Questions