已更新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>
我想检索高度、品牌和型号,但又不妨碍检索新信息。有人知道该怎么做吗?非常感谢。
最佳答案
试试这个代码:
//EDIT2: 只需尝试上面的代码,这样我的脚本就可以完成剩下的工作! (评论)
$(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>
来自维也纳的问候
关于javascript - 如何通过onmouseover显示其他数据库信息?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/26090855/