javascript 함수를 사용하면 html로 요소 위치가 변경됩니다.

한 번에 3 개 이상의 그래프를 표시하는 코드가 있습니다. div 태그와 표를 사용하여 각 그래프를 구분하고 모든 태그를 하나씩 표시합니다. 하지만 하나의 그래프를보고 나머지를 숨기려면 자바 스크립트 함수를 사용하려고합니다. 그래프의 위치가 바뀝니다. 그래프가 불완전한 방식으로 표시됩니다. http://i47.tinypic.com/or1d91.png 을하지만 난 자바 스크립트 기능을 사용하는 경우로 표시되고 : 은 일반적으로 다음과 같은 방법으로 표시 나는 자바 스크립트와 HTML 부분에 대한 아래의 코드를 포함하고 http://i48.tinypic.com/345zkeq.png javascript 함수를 사용하면 html로 요소 위치가 변경됩니다.

<script> 
    hideAllDivs = function() { 
    $("#uae").hide(); 
    $("#ksa").hide(); 
    $("#iran").hide(); 
    }; 

handleNewSelection = function() { 

hideAllDivs(); 

switch ($(this).val()) { 
    case '1': 
     $("#ksa").show(); 
    break; 
    case '2': 
     $("#uae").show(); 
    break; 
    case '3': 
     $("#iran").show(); 
    break; 
} 
}; 

$(document).ready(function() { 

$("#view").change(handleNewSelection); 

// Run the event handler once now to ensure everything is as it should be 
handleNewSelection.apply($("#view")); 

}); 
</script> 
</head> 
<body> 
<table align="center"><tr><td><select id="view"> 
<option value="">Overall</option> 
<option value="1">KSA</option> 
<option value="2">UAE</option> 
<option value="3">IRAN</option> 
</select> 
</td></tr></table> 
<div id="country"> 
<table align="center"> 
<tr><td style="width:800px;height:500px"><div id="container5" style="min-width: 400px; height: 400px; margin: 0 auto;margin-top:50px"></div></td> 
<td><table style="border: solid thin #000"><th>Country</th><th>Risk Score</th><?php  foreach($names4 as $n){ 
        echo "<tr><td>"; 
        echo $n[0]; 
        echo "</td><td>"; 
        echo $n[1]; 
        echo "</td></tr>";} 
        ?></table> 
</td></tr> 
</table> 
</div> 
<div id="ksa"> 
<table align="center"> 
<tr><td style="width:800px;height:500px"><div id="container2" style="min-width: 400px; height: 400px; margin: 0 auto;margin-top:50px"></div></td> 
<td><table style="border: solid thin #000"><th>Username</th><th>Risk Score</th><?php foreach($names1 as $n){ 
        echo "<tr><td>"; 
        echo $n[0]; 
        echo "</td><td>"; 
        echo $n[1]; 
        echo "</td></tr>";} 
        ?></table> 
</td></tr> 
</table> 
</div> 
<div id="uae"> 
<table align="center"> 
<tr><td style="width:800px;height:500px"><div id="container3" style="min-width: 400px; height: 400px; margin: 0 auto;margin-top:50px"></div></td> 
<td><table style="border: solid thin #000"><th>Username</th><th>Risk Score</th><?php foreach($names2 as $n){ 
        echo "<tr><td>"; 
        echo $n[0]; 
        echo "</td><td>"; 
        echo $n[1]; 
        echo "</td></tr>";} 
        ?></table> 
</td></tr> 
</table> 
</div> 
<div id="iran"> 
<table align="center"> 
<tr><td style="width:800px;height:500px"><div id="container4" style="min-width: 400px; height: 400px; margin: 0 auto;margin-top:50px"></div></td> 
<td><table style="border: solid thin #000"><th>Username</th><th>Risk Score</th><?php foreach($names3 as $n){ 
        echo "<tr><td>"; 
        echo $n[0]; 
        echo "</td><td>"; 
        echo $n[1]; 
        echo "</td></tr>";} 
        ?></table> 
</td></tr> 
</table> 
</div> 
</body> 
</html>

출처

2013-03-03 user2038580

내가 믿는 당신의 문제가 테이블 내의 div에 있으면 div = container 5, div 컨테이너 2, div contaier 3 등이됩니다. 테이블에 너비가 800px가되면 그 안에는 400px를주는 div가 있습니다. 그것은 100 % JAVASCRIPT가 아니며, 계산 된 CSS입니다

출처

2013-03-03 05:18:01

덕분에 많이 버디 :) – user2038580

한 번만 도울 수있어서 기쁩니다. P –

javascript 함수를 사용하면 html로 요소 위치가 변경됩니다.

답변

관련 문제