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，甚至是容器内的div，然后隐藏。但是你只展示了2个容器，而不是它的孩子们。

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

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

逻辑很简单

使用类隐藏主div（＃container1，＃container2）并使用id显示所需的（1或2）

使用onclick功能刷新div？

2 个答案: