使用onclick功能刷新div？

Question

在我的div 中，我通过 PHP 协议显示了包含来自数据库的数据的表，但是，当我切换到另一个 div 并返回显示数据库的 div 时，我看不到数据了，它只是一个空白表。所以我想我应该在我的javascript中添加重新加载功能，对吗？请帮我摆脱困境

这是我的代码

<div id="container1">

     <table width="313" border="1">
       <tr>
         <td width="103" height="62"><div align="center">Latitude</div></td>
         <td width="194" class="style5"> <div id="lat" align="center" class="style6">
           <?php 
           const DB_HOST1 = 'localhost';
    const DB_USER1 = 'root';
    const DB_PASS1 = '';
    const DB_NAME1 = 'gmap';
    $mysqli1 = new mysqli(DB_HOST1, DB_USER1,DB_PASS1 ,DB_NAME1);
 if ($mysqli1->connect_errno) {
        echo "<p>MySQL error no {$mysqli1->connect_errno} : {$mysqli1->connect_error}</p>";
        exit();
    }
    $query1 = "SELECT * FROM gmaptracker1 ORDER BY id DESC LIMIT 1";
$result1 = $mysqli1->query($query1);
if (!$result1) {
 echo "Invalid query:  {$mysqli1->query($query1)}:{$mysqli1->query($query1)}";
}
           while ($row1 = @mysqli_fetch_assoc($result1)){echo  $row1['lat'] . ',N '; ?>
         </div></td>
       </tr>
       <tr>
         <td height="60"><div align="center">Longtitude</div></td>
         <td> <div align="center" class="style6">
          <?php echo  $row1['lng'] . ',E ';} ?></div></td>
       </tr>

     </table>
</div>
<div id="container2">Container #2<p>Whole bunch of text 2</div>
</div>

这是我的javascript

  function showDiv(idInfo) {
  var sel = document.getElementById('block_left_panel2').getElementsByTagName('div');
  for (var i=0; i<sel.length; i++) { sel[i].style.display = 'none'; }
  document.getElementById('container'+idInfo).style.display = 'block';
  return false;

}

Answer 1

你可以像这样使用 jQuery：

$(document).ready(function(){
 $("#your_button_id").click(function(){
  $("#your_div_id").load("url to your php file");
 });
});

Answer 2

问题来了

var sel = document.getElementById('block_left_panel2').getElementsByTagName('div');

这段代码获取了你所有的 div，甚至是容器内的那些，然后隐藏起来。但是您只显示了 2 个容器，而不是它的子容器。

对此的解决方案是将class="div-containers" 添加到您的#container1 和#container2 div。在您的 javascript 中，将上面的行更改为：

var sel = document.getElementsByClassName('div-containers');

逻辑很简单

您使用一个类隐藏您的主要 div（#container1、#container2）并使用 id 显示您想要的（1 或 2）