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と破棄
  • 新しいアイテム：新しい位置に追加してフェードインします

2つのhtmlテーブルがある場合、それらを比較して変更するにはどうすればよいですか？

4

2 に答える 2

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 に答える
0

Christian Vargaが言ったように..表示する前にJavaScriptを使用して2つを比較し、テーブルの行のIDを使用すると、Document.getElementById("tablRow7").InnerHTML = "のように、好きな方法で強調表示できますテーブル行の強調表示されたバージョン"

于 2012-11-17T14:14:40.453 に答える