javascript - 检查刷新表，比较添加类

Question

这对我来说可能很难解释，但我会尽力。

我有一个表，其设置类似于:

<tr>
  <td class="tac">3</td>
  <td><a href="/horse/speared">Speared</a></td>
  <td class="tac">9</td>
  <td>L Camilleri</td>
  <td class="br tac">58kg</td>
  <td id="odd" class="tac betNumber"><a href="#"></a></td>
  <td id="odd" class="tac betNumber"><a href="#">15</a></td>
  <td id="odd" class="tac betNumber"><a href="#">15</a></td>
  <td id="odd" class="tac betNumber"><a href="#">15</a></td>
  <td id="odd" class="tac betNumber"><a href="#">13</a></td>
  <td id="odd" class="tac betNumber"><a href="#">21</a></td>
  <td id="odd" class="tac betNumber"><a href="#">13</a></td>
</tr>
<tr>
  <td>4</td>
  <td><a href="/horse/sneakin-around">Sneakin' Around</a></td>
  <td class="tac">17</td>
  <td>P King</td>
  <td class="br tac">58kg</td>
  <td id="odd" class="tac betNumber"><a href="#"></a></td>
  <td id="odd" class="tac betNumber"><a href="#">11</a></td>
  <td id="odd" class="tac betNumber"><a href="#">12</a></td>
  <td id="odd" class="tac betNumber"><a href="#">11</a></td>
  <td id="odd" class="tac betNumber"><a href="#">21</a></td>
  <td id="odd" class="tac betNumber"><a href="#">12</a></td>
  <td id="odd" class="tac betNumber"><a href="#">21</a></td>
</tr>

带有 id="odd"的 td 我想检查它们是否更改，如果更改，请添加一个仅闪烁或持续 2-3 秒的“已更新”类。我加载代码:

$(document).ready(function() {
   $("#responsedcontainer").load("/odd-single.php");
   var refreshId = setInterval(function() {
   $("#responsedcontainer").load("/odd-single.php&randval="+ Math.random());
   }, 3000);
   $.ajaxSetup({ cache: false });
});

每 3 秒加载并刷新一次。所以刷新发生后，检查最后一次刷新，看看是否有任何 td 的值发生了变化，如果有，则添加样式 2-3 秒。

我是 javascript/jquery 新手，所以请耐心等待。

谢谢

Answer 1

您可以向每个 td 添加一个隐藏输入，其值与“a”标签的值相同，例如:

    <td id="odd" class="tac betNumber">
        <a href="#">21</a>
        <input type="hidden" class="changeTriggerer" value="21"/>
    </td>

在此输入上，您可以定义更改事件处理程序:

   function clearUpdateClass(){
       setTimeout( function(){
           $('td.updated').removeClass('updated');
       },3000);
   };

   $(document).ready(function() {

       $("td#odd input.changeTriggerer").on('change', function(){
           $(this).parent().addClass('updated');
           clearUpdateClass();
       });

   });

我没有测试过，但希望它能工作，希望对你有帮助!

编辑

1. 我发现，使用 jquery 加载函数，DOM 没有按预期刷新，并且 jquery 选择器不起作用，所以我建议您使用以下函数来加载页面:

   function loadPage( url ){}
   

2. 如果您的表数据、行数或行顺序可以更改，则您应该按如下方式更改 td 属性:

   <td id="uniqeCellId" class="changeable tac betNumber"><a href="#"></a></td>
   

3. 添加 2 个其他函数，一个用于加载值，第二个用于检查更改:

   function saveTableData(){}
   function checkTableData(){}
   

最终:整个代码:

    var beforeLoadData = [];

    function loadPage( url ){
        var ajax = new XMLHttpRequest();
        ajax.open("GET", url , false);
        ajax.send();
        $("#responsedcontainer").html( ajax.responseText );
    }

    function saveTableData(){
        beforeLoadData = [];
        $("td.changeable").each( function(){
            beforeLoadData.push( { "key": $(this).attr('id'), "value": $(this).text() } );
        }); 
    }

    function getSavedValueFor( key ){
        for( var i in beforeLoadData ){
            if( beforeLoadData[i].key === key )
                return i;
        }
        return -1;
    }

    function checkTableData(){
        $("td.changeable").each( function(){
            var thisValue = { "key": $(this).attr('id'), "value": $(this).text() };
            var index = getSavedValueFor( thisValue.key );
            if( index >= 0){
                if( beforeLoadData[index].value !== thisValue.value )
                    $( "td#"+thisValue.key ).addClass( 'updated' );
            }else{
                //new row, if you need then you can add updated class hear too.
            }
        });
    }

    function removeUpdatedClass( ){
        setTimeout( function(){
            $('td.updated').removeClass('updated');
        },3000);
    }

    $(function(){
        //saveTableData();
        loadPage( "/odd-single.php" );
        //checkTableData();
        //removeUpdatedClass();
        var refreshId = setInterval(function() {
            saveTableData();
            loadPage("/odd-single.php&randval="+ Math.random());
            checkTableData();
            removeUpdatedClass();
        }, 3000);
    });