在按钮单击时，表移动到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 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进行布局

现在，第二个我按下按钮（比如按钮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);