Question

我想创建一个表2x2表，第一行标签和第二个包含我从sql表中获取的信息。我想在左侧显示业务名称，在右侧显示信息。我想保持2x2，所以按钮样式左边会有多个名字，点击后会在右边显示相关信息。所以它看起来像这样。

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

问题是我希望能够点击businessName并在右侧显示他们的信息。我有AJAX和php工作来检索和显示businessName，只是不知道如何使BusinessName按钮工作以显示右侧的相关信息。

存储信息的表称为business，包含列，名称和信息。

以下是我到目前为止获取名称并将其粘贴到表格中的代码：

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);

?>

这是我到目前为止所拥有的。这将返回一个业务名称列表作为单独的按钮。现在我可以使用理论或编码方面的帮助，这样我就可以点击商家名称并在表格右侧显示他们的信息。

Answer 1

你试图得到像这个document.getElementById（“txtHint”）的元素txtHint但是元素在哪里？因为它找不到任何具有此名称的元素，所以它不起作用。还要确保你在ajax电话中得到回应。您可以使用console.log（xmlhttp.responseText）或alert（xmlhttp.responseText）来检查这一点。

Answer 2

jquery可能喜欢这个

  $(function(){
var url="";
$("a").click(function(){
    $.post(url,{name:encodeURIComponent($(this).attr("href"))},function (data){
        $("#txtHint").html(data);
        });
    });
});

js可能是

window.onload=function(){

var as=document.getElementsByTagName("a");
for(i=0;i<as.length;i++){
    //alert(as.item(i).href);
    as.item(i).onclick=function(){
        //alert(as.item(i).getAttribute("href"));
        alert(1);
                     /*ajax post*/
        return true;
    }
}

}

使用AJAX从SQL获取信息并放在表中

2 个答案: