javascript - 表在按钮单击时移动到 j-query 指定位置 - 然后向后移动

Question

我需要 4x4 按钮，并且由于我是 HTML 等新手，我决定使用简单但已弃用的 Table。由于我使用预制的在线找到的 Filebrowser，我不得不将我的 Jquery 文件更改为适合 Filebrowser 的较新版本（它不会用旧版本打开）。整个样式表都改变了，但这不是真正的问题。当我按下按钮打开文件浏览器时，我的表格移动到我最初在 JS 文件中指定的位置。然后当我关闭文件浏览器时，需要半秒钟才能变回来。
为什么我的 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 - 整个布局移动到此。当我关闭文件浏览器时，它又回到了图片 2。

可能是什么问题呢？我宁愿想解决这个问题，也不愿尝试制作 4x4 div（就像我的第一个布局一样），因为我还不是最擅长 HTML-GUI 的。

Answer 1

首先，欢迎来到 Web 开发的精彩世界！

现在，每个页面的 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);