0

一度に 3 つ以上のグラフを表示するコードがあります。div タグとテーブルを使用して各グラフを分離し、すべてを上下に表示しました。しかし、JavaScript関数を使用して1つのグラフだけを表示し、残りを非表示にしようとすると. グラフの位置が変わります。グラフは不完全な方法で表示されます。通常は次のように表示されます: http://i47.tinypic.com/or1d91.png しかし、javascript 関数を使用すると、次のように表示されます: 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>
4

1 に答える 1

0

あなたの問題は、テーブル内のdiv、div = container 5、div container 2、div contaier 3などにあると思います.テーブルに800pxの幅を与え、その中に400pxのdivを配置します。、それは 100% JAVASCRIPT ではなく、計算された CSS です

于 2013-03-03T05:18:01.870 に答える