показать и скрыть javascript - PullRequest
Новая
       1

показать и скрыть javascript

1 голос
/ 10 июля 2020

Проблема: когда я использую style.display none, он вытягивает все объекты, теряет свои позиции, и моя таблица принимает другую ширину, а мой график c проходит через мой 1-разработанный без использования show и hide enter image description here 2- when i use the show and hide function enter image description here image 

html,body {
    background-image: url('../icones/ain.jpg');
    background-repeat: no-repeat;
    background-size: 100% 100%;
    width: 100vw;
    height: 100vh;
    overflow: hidden;
}
.container{
    margin-top: 200px;
}
.table{
    display: inline-block;
    width: 500px;
    margin: 30px;
}
.button12{
    background-color: #60AAEB;
    border:0;
    margin-left:150px
}
.row{
    margin:200px 300px
 }
 .xy{
     background-image: url('../icones/ctb.png');
     background-repeat: no-repeat;
 }
<!DOCTYPE html>
<html lang="en">
<head>
    <link rel="stylesheet" href="css/stylesheet.css" integrity="" crossorigin="anonymous">
    <link rel="stylesheet" href="css/dfirgo.css" integrity="" crossorigin="anonymous">
    <meta charset="UTF-8">
    <title>FRIGO</title>
</head>
<body>


    <div class="row" id="rb">
        <?php
        session_start();
        if(empty($_SESSION['prenon'])){
            header("location:index.php");
        }
        else {
        include("php/connexion.php");
        $rec = mysqli_query($conn, "SELECT * FROM espace");

        $i=0;
        while($row=mysqli_fetch_array($rec)) {
              $i++;
            if( $row[2]=='0' && $row[3]=='0'){
                $j=0;
            }else {$j=1;}
            echo"<table class=\"table\">
                <thead class=\"thead-dark\">
                <tr> 
                    <th width='400'><img src=\"icones/neige.png\">ESPACE$i<button class='button12' id='bo$i'onclick=\"myFunction('$i','$j')\"><img  src=\"icones/élément1.png\" ></button> <img id='do$i' src='icones/red.png'style='position: fixed; display:none'><img id='lo$i' src='icones/gren.png'style='position: fixed; display:none'></th>
                </tr>   
                </thead>
                <tbody>
                <tr id=$i style='display:none;'>
                    <td bgcolor='white' >";
                     echo "<div class='xy' >".$row[1]."</div>"." - "."<img src=\"icones/termo.png\">".$row[2]." - <img src=\"icones/water.png\">".$row[3];
                  echo  " </td>
                </tr>

                </tbody>
            </table>";
        }
        }
       ?>

    <script>
        function myFunction(i,j) {
            var l='do'+i;
            var m='lo'+i;
            var x = document.getElementById(i);
            var y = document.getElementById(l);
            var z = document.getElementById(m);
            if(j==='0'){
                y.style.display = "block";
            }
            else {
                z.style.display = "block";
            }
            if (x.style.display === "none") {
                x.style.display = "block";
            } else {
                x.style.display = "none";
                z.style.display = "none";
                y.style.display = "none";
            }
        }
    </script>
<script src="css/popper.min.js.js" integrity="" crossorigin="anonymous"></script>
<script src="css/slim.min.js.js" integrity="" crossorigin="anonymous"></script>
<script src="css/bootstrap.min.js.js" integrity="" crossorigin="anonymous"></script>
</body>
</html>

1 Ответ

2 голосов
/ 10 июля 2020

display:none удаляет элемент из потока документов, а позиции других элементов будут скорректированы для использования пространства, ранее занятого элементом.

Вы можете использовать visibility:hidden, если вам просто нужен элемент появляться и исчезать без корректировки макета.

См. также:

https://developer.mozilla.org/en-US/docs/Web/CSS/visibility

В чем разница между видимостью: скрытые и отображаемые: нет?

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...