Question

我有一个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>";

Here's an image of what one of the rows looks like when expanded.

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

Answer 1

你应该让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'
  }
});

AJAX将数据添加到表而不重置表。

1 个答案: