我有一个PHP网页，将抓住从一个SQL数据库中的数据，并打印成表，现在如果从数据库中某些行有一定的参数，一个隐藏的行插入下面的一个按钮来展开该行。这一切工作正常，我可以用Ajax查询到一个不同的页面上一个div，但如果有人要扩大隐藏的行（使用jQuery）和AJAX更新计时器都一起去，它会重​​置，并隐藏该行。

I have a php page that will grab data from an SQL database and print it into a table, now if certain rows from the database have a certain parameter, a hidden row is inserted below that with a button to expand the row. This all works fine and I can query it with ajax into a div on a different page, but if someone were to expand the hidden row (with jquery) and the ajax update timer were to come along, it would reset and hide that row.

下面是它装入和阿贾克斯code中的页面去用它：

Here is the page that it is filled into and the ajax code to go with it:

<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：

And from the 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更新，通过滚动，而只是添加到页的详细数据。感谢您的帮助！

So basically I don't want the rows to contract when the ajax update rolls through, but instead just add more data on to the page. Thanks for any help!

推荐答案

您应该使用您的jQuery的PHP文件返回数据的JSON格式。而不是替换HTML标签，并造成你的UI收回，你将取代数据。

You should have the php file return the data in json format to be used by your jQuery. Instead of replacing the html tags and causing your UI to retract, you will replace the data.

例如：

您的PHP code：

Your php code:

$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的

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'
  }
});