javascript - ボタンのクリック時にテーブルが j-query の指定された位置に移動し、その後元に戻ります

Question

私は 4x4 ボタンが必要で、HTML などは初めてなので、簡単ではあるが非推奨の Table を使用することにしました。事前に作成されたオンラインで見つかった Filebrowser を使用しているため、Jquery ファイルを Filebrowser に適合する新しいバージョンに変更する必要がありました (古いファイルでは開きません)。スタイルシート全体が変更されましたが、それは本当の問題ではありません。ボタンを押して Filebrowser を開くと、テーブルは JS ファイルで最初に指定した場所に移動します。その後、Filebrowser を閉じると、元に戻るまでに 0.5 秒かかります。
JS (jquery コード) のポジショニングが新しい Jquery で最初から適用されないのはなぜですか?

<table id="tablediv">
<tbody>
 <tr>
    <td id="buttonfield" style="width:25%;"><button type="button" id="button1"class="button">1</button></td>
    <td style="width:25%;"><button onclick="test()" type="button" id="button2"class="button">2</button></td>
    <td style="width:25%;"><button type="button" id="button3"class="button">3</button></td>
    <td style="width:25%;"><button  type="button" id="button4"class="button">4</button></td>
      </tr>


  <tr>
       <td id="buttonfield2" style="width:25%;"><button type="button" id="button1"class="button">5</button></td>
     <td style="width:25%;"><button type="button" id="button1"class="button">6</button></td>
     <td style="width:25%;"><button type="button" id="button1"class="button">7</button></td>
     <td style="width:25%;"><button type="button" id="button1"class="button">8</button></td>
  </tr>

        <tr>
     <td id="buttonfield3" style="width:25%;"><button type="button" id="button1"class="button">9</button></td>
     <td style="width:25%;"><button type="button" id="button1"class="button">10</button></td>
     <td style="width:25%;"><button type="button" id="button1"class="button">11</button></td>
     <td style="width:25%;"><button type="button" id="button1"class="button">12</button></td>
  </tr>

  <tr>
       <td id="buttonfield4" style="width:25%;"><button type="button" id="button1"class="button">13</button></td>
     <td style="width:25%;"><button type="button" id="button1"class="button">14</button></td>
     <td style="width:25%;"><button type="button" id="button1"class="button">15</button></td>
     <td style="width:25%;"><button type="button" id="button1"class="button">16</button></td>
  </tr>

CSS:

#tablediv {
    width:100%;
    height:80%;
}
#button1, #button2, #button3, #button4 {
    width:100%;
    height:100%; 
}
table {
    width:100%;
}

JS:

totalWidth =$('body').width();
totalHeight=$('body').height();

menuLength=(totalWidth*0.03);

$("#tablediv").css("padding-top", menuLength+(menuLength*0.50));
$("#buttonfield").css("height", menuLength+menuLength);
$("#buttonfield2").css("height", menuLength+menuLength);
$("#buttonfield3").css("height", menuLength+menuLength);
$("#buttonfield4").css("height", menuLength+menuLength); 

ボタンの機能は次のとおりです。

$("#button4").click(function() {
    $.mobile.changePage("fileBrowser.html");
});

Jquery を Jquery.js (jQuery JavaScript Library v1.9.1) から

<link type="text/css" href="jquery.mobile-1.3.0.min.css" rel="stylesheet" /> 
<script src="jquery-1.9.1.min.js" type="text/javascript"></script>  
<script src="jquery.mobile-1.3.0.min.js" type="text/javascript"></script>  

古い jquery ファイルを使用したオリジナルのレイアウト。(どのように見えるか)

新しい Jquery を使用したレイアウト

さて、2 番目にボタン (ボタン 1 としましょう) を押して Filebrowser を開きます - レイアウト全体がこれに移動します。Filebrowser を閉じると、picture2 に戻ります。

何が問題なのですか？私はまだ HTML-GUI が得意ではないので、4x4 の div (私の最初のレイアウトのように) を作成しようとするよりも、むしろこれを解決したいと考えています。