Question

我点击显示包含不同数据的表格时，每个按钮创建3个按钮

<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>

function showtabs(x){


    $("#ttt").hide(100);
    $(".showtable"+x).show(100);
}
</script>

<?php
for($x=0;$x<3;$x++){
?>

<button onclick="showtabs(<?php echo $x; ?>)"> <?php echo $x; ?> </button>

<?php

}


?>

<?php for($x=0;$x<3;$x++){ 

?>


<div id="ttt" class="showtable<?php echo $x;?>" <?php if($x>0) echo "hidden"; ?> >
<table  border="1" >

<tr> <td style="border:0"> <img src="<?php echo $y;?>"  width="700"> </td>         </tr>

<tr> <td style="border:0"> <img src="<?php echo $y2; ?>" style="display:none;border:0" width="700" > </td> </tr>

<tr> <td style="border:0"> <div class="onoffswitch">
<input type="checkbox" name="onoffswitch" class="onoffswitch-checkbox" id="myonoffswitch" onchange="showimg(<?php echo $x; ?>)" >
<label class="onoffswitch-label" for="myonoffswitch">
    <span class="onoffswitch-inner"></span>
    <span class="onoffswitch-switch"></span>
</label>
</div> </td>
</tr>

<tr> <th> </th> <th> New </th> <th> Old </th> </tr>
<tr> 
    <td> Owner </td> 
    <td <?php if($result['owner'] == $result2['owner']){?> style="background-color:green"<?php } else{ ?> style="background-color:red" <?php }?> > <?php echo $result2['owner']; ?>   </td> 
    <td> <?php echo $result['owner']; ?> </td>
</tr>
<tr> <td> Score </td> <td> - </td> <td> <?php echo $x ?></td> </tr>
<tr> <td> OverLap </td> <td> <?php echo $x ?> </td> <td>  <?php echo $x ?> </td> </tr>







</table>
</div>
<?php 

} ?>

我尝试点击每个按钮隐藏并显示他的数字$ x的表格，但是当我点击新表格时出现了什么但旧的dosn隐藏

Answer 1

你应该在包装3个表的每个div中反转使用CLASS和ID。

<div id="ttt" class="showtable<?php echo $x;?>">

应该是：

<div class="ttt" id="showtable<?php echo $x;?>"

你的脚本应该是：

<script>
    function showtabs(x) {
        $(".ttt").hide();
        $("#showtable"+x).show(100);
    }
</script>

看看这支笔：

http://codepen.io/anon/pen/vNLamv

隐藏并显示jquery功能

1 个答案: