테이블은 버튼 클릭시 지정된 위치로 이동 한 다음 뒤로 이동합니다.

Question

4x4 버튼이 필요하며 HTML 등을 처음 접했기 때문에 쉽게 사용할 수 있지만 사용되지 않는 표를 사용하기로 결정했습니다. 저에게 premade online-found Filebrowser를 사용했기 때문에 Jquery 파일을 Filebrowser에 맞는 새로운 버전으로 변경해야했습니다 (이전 버전에서는 열리지 않습니다). 전체 스타일 시트가 변경되었지만 실제 문제는 아닙니다. 내 단추를 눌러 Filebrowser를 열면 JS- 파일에서 원래 지정한 위치로 테이블이 이동합니다. 그런 다음 Filebrowser를 닫으면 30 초 후에 변경됩니다.
JS (jquery code) 위치 지정이 처음부터 새 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와 파일을

<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.js (jQuery를 자바 스크립트 라이브러리 v1.9.1)에서 내 jQuery를 변경했습니다. 이것에 전체 레이아웃 이동 - 새로운 JQuery와 지금

와

레이아웃 (이 예상되는 어떻게보고), 나는 버튼을 누르면 두 번째는 Filebrowser를 엽니 다 (의 버튼 1 가정 해 봅시다). Filebrowser를 닫으면 picture2로 돌아갑니다.

무엇이 문제 일 수 있습니까? 나는 HTML-GUI에서 아직 최고가 아니기 때문에 4x4 div를 만들기보다는 (이 첫 번째 레이아웃과 같이) 이것을 해결하려고한다.

Answer 1

우선 웹 개발의 멋진 세계에 오신 것을 환영합니다!

이제 HTML 요소의 id 속성은 페이지마다 고유해야합니다. td 요소의 id 속성은 고유하지 않습니다. 또한 인라인 스타일을 사용하지 말고 가능한 한 CSS 파일을 사용하십시오.

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%; 
} 

자바 스크립트 :

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);