Updated.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>
我想在不妨碍新信息检索的情况下检索身高,品牌和型号。有谁知道如何去做?非常感谢提前。
答案 0 :(得分:0)
试试这段代码:
// 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>
来自维也纳的问候