1

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

我有一张桌子，其设置类似于：

<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 的新手，所以请耐心等待。

谢谢

4

2 回答 2

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);
    });
于 2013-08-01T06:45:31.717 回答
0

好的，所以想出了这个主意：

首先获取一个包含所有当前文本的数组（更改之前）：

$("td#odd").each(function(){
    beforChange.push($(this).text());
});

之后，我们将扫描数组并与当前值进行比较：

var i=0;
$("td#odd").each(function(){
    if($(this).text() != beforChange[i]){
         $(this).addClass('updated');
        alert("After:" + $(this).text() + ". Befor:" + beforChange[i]);
         setTimeout( function(){
              $('td.updated').removeClass('updated');

         },2000);
    }
    i++;
});

编辑：

我为你做了一个 jsfiddle，我忘了放 i++，所以现在它可以工作了：

演示

让我知道这是否有帮助。

祝你好运。

于 2013-08-01T07:04:39.277 回答