0

私が達成しようとしているのは、一連のテーブルを PHP で構築することです (テーブルの数は動的です)。これは setInterval を使用して 5 秒ごとにリロードされます。次に、テーブルの 1 つをクリックして表示または非表示にします。私はこれのほとんどを機能させましたが、テーブルが表示されているか非表示であるかにかかわらず、テーブルの状態を維持することに行き詰まりました。テーブルがリロードされるたびに、元の状態に戻るときにテーブルの状態がリセットされます (新しい参照が渡されていると思いますが、実際にはそれが起こっていることはほぼ確実です)。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

リフレッシュ/リロードを試みる前に、単にテーブルの状態を確認してみませんか?

テーブルが非表示の場合、更新を実行しないと、テーブルの状態は変わりません。

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 に答える
0

テーブルの周りに を置いて、<div>それを表示/非表示にし<div>ませんか? そうすれば、テーブルをリロードしても、テーブルの可視性は、テーブルのdiv周囲で定義されているものと同じままです。

于 2012-08-01T10:09:49.680 に答える