下拉填充剩下的一行

Question

Let me try this again so I would like for my dropdown menu to be in the row with the data that it pulls. Then able to add more rows if needed.

So in essence I would like to choose an item, it display the item's properties on the same row. Then add more rows with a click of a button.

The table would look like this:

example

This is what I have so far:

HTML:

 <div id='main'>
              <!--Dropdown Will not work inside of table-->
         <select id='ddName' onchange="showUser(this.value)"> 
                <option id='none'>Select a Food:</option>
                <?php $sql = new Mysql(); $sql->diary(); ?>
                </select>
         <input type='button' id='addRows' value='Add Rows'/> 
        <table id="diary">
        <thead>
            <tr>
                <th scope="cols">Check</th>
                <th scope="cols">Name</th>
                <th scope="cols">Units</th>
                <th scope="cols">Amounts</th>
                <th scope="cols">Calories</th>
                <th scope="cols">Sugars</th>
            </tr>
            </thead>
            <tbody>
               <tr id='txtHint'></tr>
            </tbody>
            </table>
    </div>  

Ajax for dropdown:

//Retrived from w3schools.com
function showUser(str)
    {
    if (str=="")
      {
      document.getElementById("txtHint").innerHTML="";
      return;
      } 
    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("txtHint").innerHTML=xmlhttp.responseText;
        }
      }
    xmlhttp.open("GET","classes/ajax.php?q="+str,true);
    xmlhttp.send();
    }        

PHP for filling the table:

//Retrived from w3school.com 
$q=$_GET["q"];

require_once dirname(dirname(__FILE__)).'/includes/constants.php';

$con = new mysqli(DB_SERVER, DB_USER, DB_PASSWORD, DB_NAME) or 
                  die('There was a problem connecting to the database.');

$result = $con->query("SELECT * FROM ingredient WHERE name = '".$q."'");


while($row = $result->fetch_array())
 {
   echo "<td><input type='checkbox' /></td>";
   echo "<td>".$row['Name']."</td>";
   echo "<td>" . $row['Units'] . "</td>";
   echo "<td>" . $row['Amount'] . "</td>";
   echo "<td>" . $row['Calories'] . "</td>";
   echo "<td>" . $row['Sugar'] . "</td>";
   echo "</tr>";
 }

Answer 1

I was able to figure out my problem. I combined the two php codes into this one.

PHP Fix:

$q=$_GET["q"];

require_once dirname(dirname(__FILE__)).'/includes/constants.php';

$con = new mysqli(DB_SERVER, DB_USER, DB_PASSWORD, DB_NAME) or 
                  die('There was a problem connecting to the database.');

$result = $con->query("SELECT * FROM ingredient WHERE Name = '".$q."'");
$dd     = $con->query("SELECT * FROM ingredient");

if($q == 'Select a Food:')
{
   echo "<td><input type='checkbox' /></td>";
   echo "<td><select id='ddName' onchange='showUser(this.value)'>";
   echo "<option id='none'>Select a Food:</option>";
   while($ddrow = $dd->fetch_assoc())
     {
       if($ddrow['Name'] != $q)
          {
            echo "<option value='".$ddrow['Name']."'>".$ddrow['Name']."</option>";
          }
       else
          {
            echo "<option value='".$ddrow['Name']."' selected='selected'>".$ddrow['Name']."</option>";
          }
     }
   echo "</select></td>
";
   echo "<td></td>";
   echo "<td></td>";
   echo "<td></td>";
   echo "<td></td>";
   echo "</tr>";
}

else{

 while($row = $result->fetch_array())
   {
    echo "<td><input type='checkbox' /></td>";
    echo "<td><select id='ddName' onchange='showUser(this.value)'>";
    echo "<option id='none'>Select a Food:</option>";
        while($ddrow = $dd->fetch_assoc())
     {
      if($ddrow['Name'] != $q)
      {
        echo "<option value='".$ddrow['Name']."'>".$ddrow['Name']."  </option>";
      }
      else
      {
          echo "<option value='".$ddrow['Name']."' selected='selected'>".$ddrow['Name']."</option>";
      }
    }
      echo "</select></td>
";
      echo "<td>" . $row['Units'] . "</td>";
      echo "<td>" . $row['Amount'] . "</td>";
      echo "<td>" . $row['Calories'] . "</td>";
      echo "<td>" . $row['Sugar'] . "</td>";
      echo "</tr>";
    }
}