表移動到j按鈕點擊指定的位置 - 然後移回

Question

我需要4x4按鈕，因爲我是HTML等新手，我決定使用簡單但不推薦使用的表。由於我使用了一個預製的在線發現的Filebrowser，我必須將我的Jquery文件更改爲適合Filebrowser的新版本（它不會與舊版本打開）。整個樣式表已更改，但這不是真正的問題。當我按下我的按鈕來打開Filebrowser時，我的表格移動到我最初在JS文件中指定的位置。然後，當我關閉Filebrowser時，需要半秒鐘才能更換。
爲什麼我的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庫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

現在，第二我按下一個按鈕（假設按鈕1）打開Filebrowser - 整個佈局移動到這一點。當我關閉Filebrowser時，它會回到picture2。

可能是什麼問題？我寧願想要解決這個問題，而不是嘗試製作4x4 div（就像我的第一個佈局），因爲我還不是HTML-GUI的最佳選擇。

Answer 1

首先，歡迎來到網絡開發的精彩世界！

現在，HTML元素的id屬性應該每頁都是唯一的。你的td元素的id屬性不是唯一的。 您還應該嘗試避免內聯樣式，並儘可能多地使用css文件。

我已經爲你做了一個jsfiddle的示例，我使用jQuery獲取表格中的行數和列數，然後設置按鈕的高度和填充。這樣你可以隨心所欲地添加或刪除按鈕，jQuery代碼將確保按鈕均勻分佈。

注意：只有在每行中有相同數量的單元時，這才起作用。

鏈接的jsfiddle：http://jsfiddle.net/erichfosse/Qqhh2/6/

代碼：

HTML：

<table id="tablediv"> 
<tbody> 
    <tr> 
     <td><button type="button" class="button">1</button></td> 
     <td><button type="button" class="button">2</button></td> 
     <td><button type="button" class="button">3</button></td> 
     <td><button type="button" class="button">4</button></td> 
    </tr> 

    <tr> 
     <td><button type="button" class="button">5</button></td> 
     <td><button type="button" class="button">6</button></td> 
     <td><button type="button" class="button">7</button></td> 
     <td><button type="button" class="button">8</button></td> 
    </tr> 

    <tr> 
     <td><button type="button" class="button">9</button></td> 
     <td><button type="button" class="button">10</button></td> 
     <td><button type="button" class="button">11</button></td> 
     <td><button type="button" class="button">12</button></td> 
    </tr> 

    <tr> 
     <td><button type="button" class="button">13</button></td> 
     <td><button type="button" class="button">14</button></td> 
     <td><button type="button" class="button">15</button></td> 
     <td><button type="button" class="button">16</button></td> 
    </tr> 
</tbody> 

CSS：

#tablediv { 
    width: 100%; 
} 

的JavaScript：

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

var rows = $('tr').size(); 
var columns = $('td').size()/$('tr').size(); 

var distanceToNextButton = 8; // Adjust this to your needs 
var leftOverVerticalSpace = 23; // Increase the number subtracted to make room for more stuff 
var buttonHeight = (totalHeight/rows) - leftOverVerticalSpace; 
var buttonWidth = (totalWidth/columns) - distanceToNextButton; 
var buttonVerticalPadding = (buttonHeight/2) - 8; 
var buttonHorizontalPadding = (buttonWidth/2) - 8; 

$(".ui-btn-inner").css("padding-top", buttonVerticalPadding); 
$(".ui-btn-inner").css("padding-right", buttonHorizontalPadding/2); 
$(".ui-btn-inner").css("padding-bottom", buttonVerticalPadding); 
$(".ui-btn-inner").css("padding-left", buttonHorizontalPadding/2); 
$(".ui-btn").css("height", buttonHeight); 
$(".ui-btn").css("width", buttonWidth);