如何使用鼠标悬停显示其他数据库信息？

Question

更新.2 我有一个 MySQL 数据库，能够检索信息并进行 json 编码。

<?php
$mysqli_db_hostname = "localhost";
$mysqli_db_user = "root";
$mysqli_db_password = "password";
$mysqli_db_database = "database";



$con = @mysqli_connect($mysqli_db_hostname, $mysqli_db_user, $mysqli_db_password,
 $mysqli_db_database);

if (!$con) {
 trigger_error('Could not connect to MySQL: ' . mysqli_connect_error());
}


$var = array();
$sql = "SELECT * FROM uploads";
$result = mysqli_query($con, $sql);


while($obj = mysqli_fetch_object($result)) {
$var[] = $obj;
}
echo '{"uploads":'.json_encode($var).'}';

?>

您可以在下面的 html 页面上看到身高、品牌和型号在一行中。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script>  
$('#jsondata tr').mouseover(function(){
  var row = $(this).prop('id');
  $('#jsondata'+row).show();
}).mouseleave(function(){
  var row = $(this).prop('id');
  $('#jsondata'+row).hide();
 });
</script>

<table class="mGrid" id="jsondata">
<thead>
<th>height</th>
<th>brand</th>
<th>model</th>
</thead>
<tbody></tbody>
</table>
<div id="result">
<table class="mGrid" id="specific1">
<thead>
<th>email</th>
<th>height</th>
<th>location</th>
</thead>
<tbody></tbody>
</table>
</div>

<script type="text/javascript">
$(document).ready(function(){
var url="data_retrieval.php";
 $("#jsondata tbody").html("");
$.getJSON(url,function(data){
$.each(data.uploads, function(i,user){
var newRow =
"<tr>"
+"<td>"+user.height+"</td>"
+"<td>"+user.brand+"</td>"
+"<td>"+user.model+"</td>"
+"</tr>" ;
$(newRow).appendTo("#jsondata tbody");
 });
    $.each(data.uploads, function(i,user){
        var newdiv =
        '<table id="specific'+i+'"><tr><td>'+user.email+'</td><td>'+user.height+'</td><td>'+user.location+'</td></tr></table>';
        $(newdiv).appendTo("#result"); // Should be an DIV....
});
});
});
</script>

我也想在不妨碍检索新信息的情况下检索身高、品牌和型号。有人知道该怎么做吗？非常感谢。

Answer 1

试试这个代码：

//EDIT2: 试试上面的代码，剩下的就交给我的脚本吧！ (cmets)

$(document).ready(function(){
    var url="data_retrieval.php";
    $("#jsondata tbody").html("");
    $.getJSON(url,function(data){
        $.each(data.uploads, function(i,user){
            var newRow =
            "<tr>"
            +"<td>"+user.height+"</td>"
            +"<td>"+user.brand+"</td>"
            +"<td>"+user.model+"</td>"
            +"</tr>" ;
            $(newRow).appendTo("#jsondata tbody");
        });
        $.each(data.uploads, function(i,user){
            var newdiv =
            '<table id="specific'+i+'"><tr><td>'+user.DATASPECIFIC+'</td><td>'+user.DATASPECIFIC2+'</td><td>'+user.DATASPECIFIC3+'</td></tr></table>';
            $(newdiv).appendTo("#jsondataspecific"); // Should be an DIV....
        });
    });
});

//编辑： 添加.mouseleave() 以隐藏它....

  $('#jsondata tr').mouseover(function(){
	  var row = $(this).prop('id');
	  $('#specific'+row).show();
  }).mouseleave(function(){
	  var row = $(this).prop('id');
	  $('#specific'+row).hide();
  });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="mGrid" id="jsondata">
<thead>
<tr>
<th>height</th><th>brand</th><th>model</th>
</tr>
</thead>
<tbody>
<tr id="1">
<td>5 feet</td><td>newbrand</td><td>55-v2</td>
</tr>
<tr id="2">
<td>15 feet</td><td>newbrand2</td><td>55-v3</td>
</tr>
<tr id="3">
<td>51 feet</td><td>newbrand3</td><td>65-v5</td>
</tr>
</tbody>
</table>
</div>

<table class="mGrid" id="specific1" style="display: none; background-color: green;">
<thead>
<tr>
<th>other info1</th><th>other info1</th><th>other info1</th>
</tr>
</thead>
<tbody>
<tr>
<td>This is specific1</td><td>This is specific1</td><td>This is specific1</td>
</tr>
</tbody>
</table>
<table class="mGrid" id="specific2" style="display: none; background-color: red;">
<thead>
<tr>
<th>other info2</th><th>other info2</th><th>other info2</th>
</tr>
</thead>
<tbody>
<tr>
<td>This is specific2</td><td>This is specific2</td><td>This is specific2</td>
</tr>
</tbody>
</table>
<table class="mGrid" id="specific3" style="display: none; background-color: yellow;">
<thead>
<tr>
<th>other info3</th><th>other info3</th><th>other info3</th>
</tr>
</thead>
<tbody>
<tr>
<td>This is specific3</td><td>This is specific3</td><td>This is specific3</td>
</tr>
</tbody>
</table>

来自维也纳的问候