Question

在PHP文件中，我在我的数据库上运行查询，该查询从插入表中的每个新记录返回特定值。使用while循环，查询将获取数据并在我创建的表中回显它。

现在，使用jQuery的ajax加载方法和1秒钟的setInterval，php文件中的数据会按照我想要的方式显示在我的页面上。

但是，我现在遇到的问题是如何在单击各自的“表格”时显示有关各个用户的更多详细信息。这些细节将通过jQuery的show / hide显示。如何将记录的ID链接到我点击的内容，以便显示有关该特定用户的详细信息？

我已经创建了一个图表来解释我正在尝试做什么，因为我对PHP比较新，不确定我是否正确解释自己。

container.php

<html lang="en">
<head>
  <meta charset="utf-8">

  <title>Show and Hide User Info</title>
  <meta name="description" content="">
  <meta name="author" content="">

  <script src="http://code.jquery.com/jquery-latest.min.js"></script>
  <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

  <style>
  body {
    background-color: #000;
    color: #fff;
    font-family: tahoma, arial, verdana;
    font-size: 12px;
  }

  #users {
    background-color: #828282;
    width: 300px;
  }

  #userdetails {
    background-color: #828282;
    width: 300px;
    margin-top: 10px;
  }

  .user {
    padding: 5px;
    border-bottom: 1px solid white;
    width: 300px;
    background-color: #828282;
  }

  .user:hover {
    background-color: #282828;
    cursor: pointer;
  }

  #back:hover {
    background-color: #ffcc00;
    cursor: pointer;
    color: #000;
  }

  </style>

</head>

<body>

<div id="userlist"></div>

<div id="userdetails"></div>

<script>
setInterval(function(){
   $("#userlist").load("userlist.php");
}, 1000);
$('#userdetails').hide();
$(document).on("click",".user", function() {
    var data_id = $(this).attr("data-id");
      $.get("userdetails.php", {id: data_id}).done(function(data) {
      $('#userdetails').html(data);
      $('#userdetails').show();
      $('#userlist').hide();
  });
})
$(document).on("click","#back", function() {
  $('#userlist').show();
  $('#userdetails').hide();
});
 </script>


</body>
</html>

userlist.php

<?php

include 'dbh.php';

$result = $conn->query("SELECT * FROM users");

if ($result->num_rows > 0) {

  while ($row = $result->fetch_assoc()) {

    $color = array("ADMIN"=>"#ebc45b", "MOD"=>"#8fce61", "USER"=>"#9b9ed2");

?>

  <table data-id="<?php echo $row['id']; ?>" class="user">
    <tr>
      <td align="left"><?php echo $row['address']; ?></td>
      <td align="right"><?php echo $row['zip']; ?></td>
    </tr>
    <tr>
      <td align="left"><?php echo $row['city']; ?></td>
      <td align="right"><?php echo $row['state']; ?></td>
    </tr>
    <tr>
      <td align="left"><span style="color: <?php echo $color[$row['user_level']]; ?>"><?php echo $row['user_level']; ?></span></td>
      <td align="right">"member since..."</td>
    </tr>
  </table>

<?php
  }
}
?>

userdetails.php

<?php

include 'dbh.php';

$result = $conn->query("SELECT * FROM users WHERE id=" . $_GET["id"]);

if ($result->num_rows > 0) {

  while ($row = $result->fetch_assoc()) {

?>
<div>
<span id="back">BACK</span>
</div>
<table data-id="<?php echo $row['id']; ?>" class="user">
<tr>
  <td align="left">First Name:</td>
  <td align="right"><?php echo $row['first_name']; ?></td>
</tr>
<tr>
  <td align="left">Last Name:</td>
  <td align="right"><?php echo $row['last_name']; ?></td>
</tr>
<tr>
  <td align="left">Age:</td>
  <td align="right"><?php echo $row['age']; ?></td>
<tr>
</tr>
  <td align="left">Sex:</td>
  <td align="right"><?php echo $row['sex']; ?></td>
</tr>
</table>

<?php
 }
}
?>

Answer 1

使用Java来获取要显示数据的div。使用XML函数打开手机文件。 W3SCHOOLS有一个很好的教程。

W3SCHOOLS tutorial

Answer 2

您可以为每个data-id添加class和<table style='width: 295px; border-bottom: 1px solid white;'>个属性，以便您现在可以为表onclick设置class个处理程序。

e.g。

您的表格标签现在类似于：

"<table style='width: 295px; border-bottom: 1px solid white;' data-id='" . $row['user_unique_id'] . "' class='user_entry' >..."

现在您将处理器设置为：

$('.user_entry').click( function()
{
   var data_id = $( this ).attr( "data-id" );
   $.get
   ( "get_user_details.php" , { user_id: data_id } ).done( function( data )
    {
        $( '#container_for_viewing_html' ).html( data );
    });
   })

您现在在$_GET['user_id']脚本中使用get_user_details.php来了解从数据库获取数据的唯一用户并返回精美转义的html（不要忘记您可能需要执行编码等操作html字符，以防止XXS和相关的攻击）

Answer 3

我认为您的用户列表会在一秒钟后加载，因此您的表单击可能不会触发。你能试试吗？

$(document).on("click",".user", function() {
    var data_id = $(this).attr("data-id");
      $.get("userdetails.php", {id: data_id}).done(function(data) {
      $('#userdetails').html(data);
      $('#userdetails').show();
      $('.user').hide();
  });
})

即使您的用户详细信息的表类名称与用户列表的表类名称相同。

使用jQuery显示SQL数据

3 个答案: