在表重新加载后，使用setInterval保持表的显示-隐藏状态

Maintaing show hide state of table after table reloads, using setInterval

本文关键字：setInterval 状态 隐藏 使用 显示 新加载 加载      更新时间：2024-06-04

我试图实现的是，用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>

为什么不在表周围放置一个<div>并显示/隐藏该<div>？这样，如果重新加载该表，则该表的可见性将保持与表周围的div中定义的可见性相同。

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

如果表是隐藏的，则不执行刷新，则表的状态不会更改。

您的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 ...
    );
}
相关文章：