php - AJAX を使用して SQL から情報を取得し、テーブルに配置する

Question

テーブル 2x2 テーブル、最初の行ラベル、2 番目のテーブルを、SQL テーブルから取得した情報で作成したいと考えています。左側に会社名、右側に情報を表示したい。2x2 のままにしたいので、左側に複数の名前がボタン スタイルで表示され、クリックすると右側に関連情報が表示されます。したがって、次のようになります。

|--------------------|---------------------|
|       NAME         |        INFO         |
|--------------------|---------------------|
|    BusinessName1   |       their info    |
|    BusinessName2   |                     |
|    BusinessName3   |                     |
|--------------------|---------------------|

問題は、businessNameをクリックして右側に情報を表示できるようにしたいということです。BusinessName の取得と表示のために AJAX と php を使用していますが、BusinessName ボタンを機能させて関連情報を右側に表示する方法がわかりません。

情報が格納されているテーブルは、ビジネスと呼ばれ、列、名前、および情報があります。

名前を取得してテーブルに貼り付けるためのコードは次のとおりです。

Main.php

//script for sending value 'business' to getTable.php. which will return the list of all business 
//names in button form.

<script type='text/javascript'>
function showTable(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","getTable.php?q="+str,true);
xmlhttp.send();

}
</script>

<?php ob_start(); ?> //using templates

//menu bar, onclick of button 'Business Basics' will run showTable script and pass value 'business' to it.
 <table width="829" border="1" cellspacing="5" cellpadding="2" align="center">
        <tr>
        <th scope="col" align="center"><button onclick="showTable(this.value)" value="business">    
        Business Basics </button></th>
        <th scope="col" align="center"><a href="" > Co-working spaces</a></th>
        <th scope="col" align="center"><a href=""> Events</a></th>
        <th scope="col" align="center"><a href=""> Entrepreneur organisations</a></th>
        </tr>
        <tr>
        <th scope="col" align="center"><a href=""> Free/Cheap resoucres</a></th>
        <th scope="col" align="center"><a href=""> Government Grants</a></th>
        <th scope="col" align="center"><a href=""> Government websites</a></th>
        <th scope="col" align="center"><a href=""> Internships</a></th>
       </tr>
       </table>

    <h1> Some stuff</h1>

    //table where the info will be displayed, 'txtHint' is where the business names are being   
    //displayed and 'txtHint2' is where i want the relevant info to be displayed.

    <table width="100%" width="830" border="1" cellpadding="2" cellspacing="5" align="center">
    <tr>
    <th scope="col" align="center" width="50%"> Pick one </th>
    <th scope="col" align="center" width="50%"> More Information </th>
    </tr>
    <tr>
    <th scope="col" align="left" width="50%"> <div id="txtHint"><b>Pick a category!</b></div></th>
    <th scope="col" align="left" width="50%"> <div id="txtHint2"><b>more info over here</b></div>    
    </th>
    </tr>
    </table> 

getTable.php

<?php

$q=$_GET["q"];
$count = 0;

$con = mysqli_connect('localhost','root','root','bregu');
if (!$con)
  {
  die('Could not connect: ' . mysqli_error($con));
  }

$result = mysqli_query($con,"SELECT * FROM `".$q."`");  //$q is the value 'business'

while($row = mysqli_fetch_array($result))
{
echo '<lo><button value="name" type="submit">'.$row['name'].'</lo><br>';
$count++;
}
mysqli_close($con);

?>

これは私がこれまでに持っているものです。ビジネス名のリストを個別のボタンとして返します。これで、理論またはコード化されたヘルプを使用して、ビジネス名をクリックして、表の右側にその情報を表示できるようになりました。