Javascript 刷新时检查表，比较添加类

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

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

<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>

每3秒加载并刷新一次。因此，在刷新发生后，检查最后一次刷新，并查看是否有任何td值发生了更改，如果有，请添加样式2-3秒

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

---

谢谢

您可以使用与“a”标记相同的值向每个td添加隐藏输入，例如：

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

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

编辑

我发现，使用jquery加载函数时，DOM并没有按预期刷新，jquery选择器也不能工作，因此我建议您使用以下函数加载页面：

function loadPage( url ){}

如果表数据、行计数或行顺序可以更改，则应按如下方式更改td属性：

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

最后：整个代码：

    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);
    });

---

您可以向每个td添加一个与“a”标记具有相同值的隐藏输入，例如：

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

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

编辑

我发现，使用jquery加载函数时，DOM并没有按预期刷新，jquery选择器也不能工作，因此我建议您使用以下函数加载页面：

function loadPage( url ){}

如果表数据、行计数或行顺序可以更改，则应按如下方式更改td属性：

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

最后：整个代码：

    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);
    });

---

好吧，我想到了这个主意：

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

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

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++;
});

编辑：

我为您制作了一个JSFIDLE，我忘了放I++，所以现在它可以工作了：

如果有帮助，请告诉我

---

祝你好运。

好的，我想到了这个主意：

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

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

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++;
});

编辑：

我为您制作了一个JSFIDLE，我忘了放I++，所以现在它可以工作了：

如果有帮助，请告诉我

---

---

祝你好运。

你的所有td都在更改，或者只有一个？所有id为oddside的td注意：不要使用多个同名id。我多次看到你的id='odd'。ID应该是唯一的。@andrew如果需要，我可以使它们唯一。它们仅用于我需要的示例。您的所有TDs都在更改，或者只有一个TDs？id为oddside的所有td注意：不要使用同名的多个id。我多次看到你的id='odd'。ID应该是唯一的。@andrew如果需要，我可以使它们唯一。他们只是针对我需要的这个例子，我添加了这个，验证了输入的正确性，没有做任何事情。不幸的是，我不认为这会起作用，因为我现在的代码基本上只是“刷新”div.Ohh，所以你的整个表都被重新加载了，而不仅仅是td中的值？唯一的解决方案是，如果在加载前在结构中保存每个td值，并在加载后检查更改。。。也许你应该重新考虑一下重新加载的技巧。是的，没错，杜安写了一个很好的答案。我只建议您在each（）函数之后调用removeClass delay，并且只调用一次，而不是针对每个元素。如果行号和顺序不变，这个解决方案效果很好。我尝试了这个新代码来代替我的代码，加载函数甚至没有加载页面/Lobbs-single.php？，如果您尝试这个：$（“#responsedcontainer”）.load（“/odd single.php”）；我添加了这个，验证了输入的正确性，没有做任何事情。不幸的是，我不认为这会起作用，因为我现在的代码基本上只是“刷新”div.Ohh，所以你的整个表都被重新加载了，而不仅仅是td中的值？唯一的解决方案是，如果在加载前在结构中保存每个td值，并在加载后检查更改。。。也许你应该重新考虑一下重新加载的技巧。是的，没错，杜安写了一个很好的答案。我只建议您在each（）函数之后调用removeClass delay，并且只调用一次，而不是针对每个元素。如果行号和顺序不变，这个解决方案效果很好。我尝试了这个新代码来代替我的代码，加载函数甚至没有加载页面/Lobbs-single.php？，如果您尝试这个：$（“#responsedcontainer”）.load（“/odd single.php”）；取代我的加载功能？尝试了这个。看起来很接近。也许我错了，它不起作用，但我尝试添加：

alert（beforChange[0]）

或

console.log（beforChange）

且为空。这是对的吗？我加上了td#odd，现在得到了一个数字数组。我在这两个地方都加了这个，但不幸的是仍然不起作用。在收到你的回复之前，我会一直胡闹。根据@或段代码，尝试将id='odd'更改为class='odd'，代码从$（“#odd”）.each（function（）{更改为$（'td.odd”）.each（function（））{可能是相同的id导致它行为不正常？我现在会试试。但是我已经让它工作了，但是它在1更新时将所有id=odd的td都更改为类。@user2639176我更新了代码并为您放置了一个JSFIDLE。它现在工作了。尝试了这个。看起来很接近。可能我错了，它不工作，但我尝试添加：

alert（beforChange[0]）；

或

控制台.log（beforChange）

并且是空的。对吗？我添加了td#odd，现在得到了一个数字数组。我在两个位置都添加了这个，但不幸的是仍然不起作用。在收到您的回复之前，我将继续胡闹。根据@或段码，尝试将id='odd'更改为class='odd'，代码从$（“#odd”）。每个（函数（）{to$(“td.odd”）.each（function（）{可能是相同的ID导致它行为不正常？我现在就试试。H