Question

当页面最初加载时，它会从保持表更新的PHP文件中加载此表：

<table id="mytable">
    <tr id="1"><td>Item 1</td><td>bla bla bla</td><td class="sort">1</td></tr>
    <tr id="2"><td>Item 2</td><td>bla bla bla</td><td class="sort">2</td></tr>
    <tr id="3"><td>Item 3</td><td>bla bla bla</td><td class="sort">3</td></tr>
    <tr id="4"><td>Item 4</td><td>bla bla bla</td><td class="sort">4</td></tr>
    <tr id="5"><td>Item 5</td><td>bla bla bla</td><td class="sort">5</td></tr>
</table>

然后每隔10秒我再次通过ajax加载表（可能已经从mysql更新）以将其与第一个进行比较并相应地采取行动，假设更新后的表格如下所示：

<table id="mytable">
    <tr id="1"><td>Item 1</td><td>bla bla bla</td><td class="sort">1</td></tr>
    <tr id="32"><td>Item 32</td><td>bla bla bla</td><td class="sort">2</td></tr>
    <tr id="5"><td>Item 5</td><td>bla bla bla</td><td class="sort">3</td></tr>
    <tr id="21"><td>Item 21</td><td>bla bla bla</td><td class="sort">4</td></tr>
    <tr id="7"><td>Item 7</td><td>bla bla bla</td><td class="sort">5</td></tr>
</table>

问题在于，如果我只是加载表（替换它），很难跟踪发生的事情，所以我想让它变得动画。

我希望每次将表的“当前”版本与“更新”版本进行比较，如果有更改，请相应地采取行动：

删除的项目：fadeOut并销毁
新项目：追加新位置并淡入

拥有两个html表格，我如何比较它们并进行更改？

Answer 1

像Christian Varga说的那样..如果你在显示它之前使用javascript比较两者，然后使用表格中行的id，你可以用任何你想要的方式突出显示它，比如Document.getElementById（“tablRow7”）。 InnerHTML =“表格行的一些突出显示版本”

Answer 2

我猜你可以用它作为基础：

  <html>
  Old Table <br />
  <table id="mytable1">
<tr id="1"><td>Item 1</td><td>bla bla bla</td><td class="sort">1</td></tr>
<tr id="2"><td>Item 2</td><td>bla bla bla</td><td class="sort">2</td></tr>
<tr id="3"><td>Item 3</td><td>bla bla bla</td><td class="sort">3</td></tr>
<tr id="4"><td>Item 4</td><td>bla bla bla</td><td class="sort">4</td></tr>
<tr id="5"><td>Item 5</td><td>bla bla bla</td><td class="sort">5</td></tr>
  </table>
  <br />
  New Table <br />
  <table id="mytable2">
<tr id="1"><td>Item 1</td><td>bla bla bla</td><td class="sort">1</td></tr>
<tr id="32"><td>Item 32</td><td>bla bla bla</td><td class="sort">2</td></tr>
<tr id="5"><td>Item 5</td><td>bla bla bla</td><td class="sort">3</td></tr>
<tr id="21"><td>Item 21</td><td>bla bla bla</td><td class="sort">4</td></tr>
<tr id="7"><td>Item 7</td><td>bla bla bla</td><td class="sort">5</td></tr>
  </table>


  <input type="button" onclick="merge('mytable1', 'mytable2')" value="merge" />
  <script type="text/javascript" src="jquery.js" ></script>
  <script type="text/javascript">
function merge(id1, id2){
    var tbl1 = $('#'+id1);
    var tbl2 = $('#'+id2);
    var currentIds =  new Array();
    var newIds =  new Array();
    $(tbl2).find('tr').each(function(){
        newIds.push($(this).attr('id'));
    });
    var newIdsStr = ","+ newIds.join(',')+",";
    console.log(newIdsStr);
    $(tbl1).find('tr').each(function(){
        var id = $(this).attr('id');
        var index = newIdsStr.indexOf(","+id+",");
        //console.log(id);
        if( index == -1){
            $(this).hide(500);
        }
        else{
            //console.log(newIdsStr.substring(0, index) + newIdsStr.substring( index + id.length + 1));
            newIdsStr = newIdsStr.substring(0, index) + newIdsStr.substring( index + id.length + 1);
        }
    });
    if(newIdsStr.length==1)
        return;
    var finalArr = newIdsStr.substring(1, newIdsStr.length -1).split(',');
    console.log(finalArr);
    for(var i=0;i<finalArr.length; i++){
        var tr = $('<tr id="'+finalArr[i]+'"><td>Item '+finalArr[i]+'</td><td>bla bla bla</td><td class="sort">5</td></tr>');
        $(tr).css('opacity','0').appendTo(tbl1).fadeTo(500, 1);     
    }
    console.log(newIdsStr);
}

将旧HTML表与新表进行比较并为更改设置动画

2 个答案: