0

我想要实现的是，使用 PHP 构建一系列表（表的数量是动态的），使用 setInterval 每 5 秒重新加载一次。然后可以单击其中一个表来显示或隐藏它。我已经完成了大部分工作，但我一直坚持维护表格的状态，无论它们是可见的还是隐藏的。每次重新加载表时，表状态都会重置为它返回到原始状态（我认为正在传递一个新的引用，实际上我几乎可以肯定这就是发生了什么）。我尝试将对 div 的引用复制到一个变量并将其与旧的进行比较（我将那部分代码取出，因为它不起作用），但我无法将旧设置放入新标签中。 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
      "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>

<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
        var divStateArray;
        function random_number() {
                var random = Math.floor(Math.random()*110000);
                return random;
        }
        //console.log(divStateArray);
        function reload(state){ 
                 $(".responsecontainer").load('counter.php?randval=' + random_number(), function() {
                                var $rowelements = $(".divRow");
                                var $divRow = $('.divTable').find($rowelements);        
                                        //console.log($divRow);
                                //by copying $divRow it copies a reference/pointer into divStateArray. 
                                //so any changes made to the properties of the div divRow are reflected in
                                //the afore mentioned variable. 
                                divStateArray = $divRow;

                                //merge the old settings in divoldstate with the new references in divStateArray
                                if (state == 'all') {
                                        divStateArray.hide();
                                }



                        }); 
        }
        //refresh the page every x miliseconds 
        var refreshId = setInterval(function() {
                                                        reload();                         
                                                }, 5000);


        $(document).ready(function() {
        //show the spinning logo until the tables are loaded. 
        $(".responsecontainer").html('<img src="/lbadmin/images/ajax-loader.gif" width=32 height=32 />');
        //display the page as soon as possible, then begin reloading every x seconds

        reload('all');
$(document).on('click',".headRow",function(){
                var $divRow = $(this).nextAll(".divRow")
                //console.log($divRow);
                if ($divRow.is(":hidden")) {
                       $divRow.show('fast');

                }                               
                else {
                       $divRow.hide('fast');
                }
        });

});


</script>
</head>
<body>
<p>hello</p>
<div class="responsecontainer" id="time1">
</div>
</br>
</body>
</html>

被加载的表是（暂时和测试它只是一个静态表，但最终这将变为多个动态表 -

<?php
echo date("l, F d, Y h:i:s" ,time());
?>
<link rel="stylesheet" type="text/css" href="test.css" />

<p>hello</p>
</br>
<div class="divTable">
        <div class="headRow">
                <div class="divCell">LABEL: vippoo</div>
                <div  class="divCell">IP: 192.168.67.505</div>
                <div  class="divCell">Ports: 80-81</div>
                <div  class="divCell">Method: Layer 4</div>
                <div  class="divCell">Mode: DR</div>
                <div  class="divCell">Protocol: TCP</div>
                <div  class="divCell">Graph: link</div>
        </div>


 <div class="divRow">
                        <div class="divCell">label1</div>
                        <div class="divCell">192.168.66.666</div>
                        <div class="divCell">1</div>
                        <div class="divCell">Drain</div>
                        <div class="divCell">Halt</div>
                        <div class="divCell">uparrow</div>
                        <div class="divCell">graphlink</div>
                </div>
 <div class="divRow">
                        <div class="divCell">label1</div>
                        <div class="divCell">192.168.66.666</div>
                        <div class="divCell">1</div>
                        <div class="divCell">Drain</div>
                        <div class="divCell">Halt</div>
                        <div class="divCell">uparrow</div>
                        <div class="divCell">graphlink</div>
                </div>
 <div class="divRow">
                        <div class="divCell">label1</div>
                        <div class="divCell">192.168.66.666</div>
                        <div class="divCell">1</div>
                        <div class="divCell">Drain</div>
                        <div class="divCell">Halt</div>
                        <div class="divCell">uparrow</div>
                        <div class="divCell">graphlink</div>
                </div>

</div>
</br>
4

2 回答 2

0

Why don't you put a <div> around the table and show / hide that <div>? That way, if you reload the table, the visibility of the table remains the same as that is defined in the div around the table.

于 2012-08-01T10:09:49.680 回答
0

为什么不在尝试刷新/重新加载之前检查表的状态？

如果表被隐藏不执行刷新，那么表的状态不会改变。

您的 set-interval 方法可以继续循环，这就是您要添加支票的地方（内部）。

所以你reload变成了这样

function isTableHidden() { 
    var $divRow = $('.divTable').nextAll(".divRow")
    return ($divRow.is(":hidden"))
}

function reload(state) { 

    if (isTableHidden())
        return; // exit early and don't reload anything

    $(".responsecontainer").load(
        ... rest of your oringal reload code ...
    );
}
于 2012-08-01T10:17:42.327 回答