0

当页面最初加载时，它会从保持表更新的 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 和destroy
  • 新项目：追加到新位置并淡入

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

4

2 回答 2

0

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

于 2012-11-17T14:14:40.453 回答
0

我想你可以以此为基础：

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

于 2012-11-17T16:38:23.043 回答