0

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

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

问题是我希望能够单击 businessName 并在右侧显示他们的信息。我有 AJAX 和 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>

获取表.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);

?>

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

4

2 回答 2

0

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

}

于 2013-07-17T08:26:49.763 回答
0

您正在尝试像这样 document.getElementById("txtHint") 获取元素 txtHint 但元素在哪里？？？因为它不会找到任何具有此名称的元素，所以它不会工作。还要确保您在 ajax 调用中得到响应。您可以使用 console.log(xmlhttp.responseText) 或 alert(xmlhttp.responseText) 进行检查。

于 2013-07-17T07:46:22.057 回答