0

我有一个 php 页面，它将从 SQL 数据库中获取数据并将其打印到表中，现在如果数据库中的某些行具有某个参数，则会在其下方插入一个隐藏行，并带有一个按钮来展开该行。这一切都很好，我可以使用 ajax 将其查询到不同页面上的 div 中，但是如果有人要扩展隐藏行（使用 jquery）并且出现 ajax 更新计时器，它将重置并隐藏该行。

这是它所填写的页面以及与之配套的 ajax 代码：

<script type="text/javascript">
 $(document).ready(function() {
     $("#query").load("query.php");
   var refreshId = setInterval(function() {
      $("#query").load('query.php');
   }, 5000);
   $.ajaxSetup({ cache: false }); 

});
</script>

<div id="query"></div>

从query.php：

    while($row = mysql_fetch_array($result))
    {
      $decoded = json_decode($row['B'],true);
      $r = $decoded['r'];
      $t = $decoded['t']; 
      $l = $decoded['l'];       
      $g = $decoded['g'];      
      $tp = (int)$t + 3;            

      echo "<tr>";
      echo "<td>" . $row['ID'] . "</td>";
      echo "<td align=\"center\"><font color=\"red\">[$t]</font></td>";
      echo "<td align=\"center\"><font color=\"blue\">[$r]</font></td>";
      echo(((int)$t != 0) ? '<td><button class="expand stylebutton">+</button>' : '<td>');
      echo $row['Name_'] . "</td>";
      echo "<td>" . $row['Date_'] . "</td>";
      echo "<td>" . $row['IP'] . "</td>";
      echo "<td>" . $row['G'] . "</td>";
      echo "<td>" . $row['A'] . "</td>";
      echo "<td>" . $row['Add'] . "</td>";
      echo "<td>" . $row['Remove'] . "</td>";
      echo "<td>" . $row['Comments'] . "</td>";
      echo "</tr>";
      if((int)$t != 0)
    {
          echo "<tr class=\"b\"style=\"display: none;\">";
          echo "<td></td><td colspan=\"$tp\"><div style=\"color: #FC0;\"> Local:</div>";
          foreach($l as $ll)
          {
            echo $ll . "<br>";
          }
          echo "<br><div style=\"color: #F00;\">Global:</div>";
          foreach($g as $gg)
          {
            echo $gg . "<br> ";
          }
          echo "</td></tr>";
    }
    }
    echo "</table>";
echo "<script type=\"text/javascript\">";
echo "$(document).ready(function() {
        $(\".stylebutton\").click(function(){
            $(this).parent().parent().next().toggle();
         if($(this).text() == \"+\")
         {
            $(this).text('-');
         }
         else
         {
            $(this).text('+');
         }
        });
});
</script>";

这是其中一行在展开时的样子的图像。

所以基本上我不希望在 ajax 更新滚动时行收缩，而是只在页面上添加更多数据。谢谢你的帮助！

4

1 回答 1

0

您应该让 php 文件以 json 格式返回数据，以供您的 jQuery 使用。您将替换数据，而不是替换 html 标记并导致 UI 缩回。

例如

你的PHP代码：

$data_array = array();

while($row = mysql_fetch_array($sql)) {
  array_push( $row['some_row'] , $data_array ); // add the data to an array that will later be json encoded
}

echo json_encode($data_array);

jQuery

$.ajax({
  url: 'query.php',
  success: function(data) {
    alert('This is the JSON: ' + JSON.stringify(data));
    $('#selector').text(data.some_row); // place the data inside the element with id = 'selector'
  }
});
于 2012-06-07T23:33:03.973 回答