Php 使用javascript函数后html中元素位置的变化
我有一个代码，一次显示三个以上的图形。我使用了div标签和表来分隔每个图形，并在另一个下面显示所有内容。但是当我尝试使用javascript函数只查看一个图形并隐藏其余图形时。图形的位置会发生变化。图表将以不完整的方式显示。 它通常以以下方式显示： 但当我使用javascript函数时，它显示为： 下面是javascript和html部分的代码：Php 使用javascript函数后html中元素位置的变化,php,javascript,jquery,html,Php,Javascript,Jquery,Html,我有一个代码，一次显示三个以上的图形。我使用了div标签和表来分隔每个图形，并在另一个下面显示所有内容。但是当我尝试使用javascript函数只查看一个图形并隐藏其余图形时。图形的位置会发生变化。图表将以不完整的方式显示。 它通常以以下方式显示： 但当我使用javascript函数时，它显示为： 下面是javascript和html部分的代码： <script> hideAllDivs = function () { $("#uae").hide(); $(
<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>
HIDEALDIVS=函数（）{
$（“#阿联酋”）.hide（）；
$（“#ksa”）.hide（）；
$（“#伊朗”）.hide（）；
};
handleNewSelection=函数（）{
hidealdivs（）；
开关（$（this.val（））{
案例“1”：
$（“#ksa”）.show（）；
打破
案例“2”：
$（“#阿联酋”）.show（）；
打破
案例“3”：
美元（“#伊朗”）.show（）；
打破
}
};
$（文档）.ready（函数（）{
$（“#视图”）。更改（handleNewSelection）；
//现在运行事件处理程序一次，以确保一切正常
handleNewSelection.apply（$（“#视图”）；
});
总体上
KSA
阿拉伯联合酋长国
伊朗
国家风险评分
用户名风险评分
用户名风险评分
用户名风险评分