Question

我有一个使用html PHP和Mysql动态创建的表。我想使用Ajax从数据库中检索信息。

我发现的最接近的例子是我想做的事情 http://www.w3schools.com/PHP/php_ajax_database.asp但这会使用下拉列表。

任何人都可以提供一些有关如何执行上述操作但使用表格的信息，这样您就可以单击一个单元格，并将包含名称的单元格发送到数据库以检索特定数据。

   <?php
$default = "<img src='http://localhost/on.png' width='24' height='24'/>";
$default1 = "<img src='http://localhost/of.png' width='24' height='24'/>";
$con = mysql_connect("*****","*****","****");
if (!$con){
die("Can not connect: " . mysql_error());
}
mysql_select_db ("****",$con);
$sql= "select act.*
from user_activity as act
  inner join (
  select user_id, max(timestamp) as max_ts
  from user_activity
  group by user_id) as a on act.user_id=a.user_id and act.timestamp=a.max_ts";
$mydata = mysql_query($sql,$con);

echo "<table id='tfhover',table border=0>
<tr>
<th>Users</th>
<th>Status<th>
</tr>";
while($record = mysql_fetch_array($mydata)){
echo "<tr>";
echo "<td>" . $record['user_id'] . "</td>";
if (strtolower(trim($record['activity']))!=strtolower('LOGIN')){ 
echo "<td>" . $default1  . "</td>";
}else{

echo "<td>" . $default  . "</td>";

}

Answer 1

您可以在数据属性中存储ID，并根据请求使用它。

<table>
  <tbody>
    <tr>
      <td data-item-id="1">1</td>
      <td data-item-id="2">2</td>
    </tr>
  </tbody>
</table>

<script type="text/javascript">
  $('table').on('click', 'td', function() {
    var id = $(this).data('item-id');
    $.get('url', {id: id}, function() {
      //process
    });
  });
</script>

Answer 2

您也可以在表格的tr中使用onClick="showUser(str)"。

以下是一个经过编辑的例子：

<?php   
//Test Data
$result = array(
1=>array('FirstName'=>'Peter','Lastname'=>'Griffin','Age'=>41,'HomeTown'=>'Quahog','Job'=>'Brewery'),
2=>array('FirstName'=>'Lois','Lastname'=>'Griffin','Age'=>40,'HomeTown'=>'Newport','Job'=>'Piano Teacher'),
3=>array('FirstName'=>'Joseph','Lastname'=>'Swanson','Age'=>39,'HomeTown'=>'Quahog','Job'=>'Police Officer'),
4=>array('FirstName'=>'Glenn','Lastname'=>'Quagmire','Age'=>41,'HomeTown'=>'Quahog','Job'=>'Pilot'),
);

//Your AJAX Responce
if(isset($_GET["q"])){

    if(array_key_exists($_GET["q"],$result)){
        echo "<table border='1'><th>Firstname</th><th>Lastname</th><th>Age</th><th>Hometown</th><th>Job</th></tr>";
        echo "<tr>";
        echo "<td>" . $result[$_GET["q"]]['FirstName'] . "</td>";
        echo "<td>" . $result[$_GET["q"]]['Lastname'] . "</td>";
        echo "<td>" . $result[$_GET["q"]]['Age'] . "</td>";
        echo "<td>" . $result[$_GET["q"]]['HomeTown'] . "</td>";
        echo "<td>" . $result[$_GET["q"]]['Job'] . "</td>";
        echo "</tr>";
        echo "</table>";
    }else{
        echo "No Results";
    }
    die;
}
?> 

<html>
<head>
<script>
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","index.php?q="+str,true);
    xmlhttp.send();
}
</script>
</head>
<body>

<table border="1" cellpadding="0" cellspacing="0" style="border-collapse: collapse" width="100%">
  <?php foreach($result as $key=>$value){?>
    <tr onClick="showUser(<?php echo $key;?>)">
        <td width="50%">Get <?php echo $value['FirstName'];?></td>
    </tr>
 <?php } ?>
</table>

<br />
<div id="txtHint"><b>Person info will be listed here.</b></div>

</body>
</html>

使用单元格单击事件通过动态创建的表使用Ajax从数据库访问信息

2 个答案: