Как динамически создать n номеров столбцов? - PullRequest
Новая
       2

Как динамически создать n номеров столбцов?

0 голосов
/ 14 апреля 2019

Я хотел бы немного украсить свой код .. эта страница служит в качестве сводки для визуализации данных, присутствующих в моей базе данных, я хотел бы сделать так, чтобы она не просто смотрела по одной кнопке на столбец, а хотела бычтобы поставить 5 кнопок для столбца в соответствии с точным графическим порядком ... решение, которое мне кажется более подходящим, это использование ... Я реализовал все, и кнопки создаются динамически и правильно ... единственное, чточто я печатаю каждый раз в новой строке кнопку ... кто-нибудь знает, как можно поместить 5/4 кнопки в строку и сказать им, чтобы они автоматически переносились?Я прилагаю фотографию моего результата .. 

<!DOCTYPE html>
<?php 
    session_start();
    if(!isset($_SESSION["username"])){
        header('location: ../../../index.php');
    }else
    {

?>
<?php
$servername = "localhost";
$username = "root";
$password = "Salc!2018";
$dbname = "my_progettocantiere";

// Create connection
$conn = new mysqli($servername, $username, $password, $dbname);
// Check connection
if ($conn->connect_error) {
    die("Connection failed: " . $conn->connect_error);
} 

$sql = "SELECT idCantiere,nomeCantiere,codiceCommessa,indirizzoCantiere FROM Cantiere";
$result = $conn->query($sql);

if ($result->num_rows > 0) {
    // output data of each row
    echo'<br><br><br>';
    int $cont = 0;
        echo '<table align="center" border="0px" width = "1300px">';
        echo '<tr align="center">';
        while($row = $result->fetch_assoc()) 
        {
        if($cont == 5)
        {
        echo '<td><a class="myButton" href="sceltaOperazione.php?idCantiere=' . $row["idCantiere"] . '">' . $row["nomeCantiere"] . '</a></td>';
        }
        else
        {
        echo '<tr><td><a class="myButton" href="sceltaOperazione.php?idCantiere=' . $row["idCantiere"] . '">' . $row["nomeCantiere"] . '</a></td></tr>';

        }

$cont++;
echo'</tr>';
        echo '</table>';


    echo'<br><br><br>';
        echo '<table align="center" border="1px" width = "1300px">';
        echo '<tr><td align="center" bgcolor="000035">';
        echo '<a href="../../pagineHtml/inserimento/inserimentoGenerale/inserimentoCantiere.php" class="myButton" alt="Nuovo Cantiere +">Nuovo Cantiere +</a>';
        echo '</tr></td>';
        echo '</table>';

} else {
    echo "0 results";
}
//$idCantiere = $_POST["idCantiere"];



$conn->close();
?>

<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
   <title>Progetto Cantiere</title>
    <!-- Bootstrap -->
    <link href="../paginaIniziale/css/bootstrap-4.0.0.css" rel="stylesheet">
  </head>
    <style>

    .myButton {
    -moz-box-shadow:inset 0px 1px 0px 0px #000035;
    -webkit-box-shadow:inset 0px 1px 0px 0px #000035;
    box-shadow:inset 0px 1px 0px 0px #000035;
    background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #000035), color-stop(1, #000035));
    background:-moz-linear-gradient(top, #000035 5%, #000035 100%);
    background:-webkit-linear-gradient(top, #000035 5%, #000035 100%);
    background:-o-linear-gradient(top, #000035 5%, #000035 100%);
    background:-ms-linear-gradient(top, #000035 5%, #000035 100%);
    background:linear-gradient(to bottom, #000035 5%, #000035 100%);
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#000035', endColorstr='#000035',GradientType=0);
    background-color:#ffffff;
    -moz-border-radius:6px;
    -webkit-border-radius:6px;
    border-radius:6px;
    border:1px solid #000035;
    border:1px solid #000035;
    display:inline-block;
    cursor:pointer;
    color:#ffffff;
    font-family:Arial;
    font-size:28px;
    font-weight:bold;
    padding:32px 76px;
    text-decoration:none;
    text-shadow:0px 1px 0px #1570cd;
}
.myButton:hover {
    background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #000035), color-stop(1, #000035));
    background:-moz-linear-gradient(top, #000035 5%, #000035 100%);
    background:-webkit-linear-gradient(top, #000035 5%, #000035 100%);
    background:-o-linear-gradient(top, #000035 5%, #000035 100%);
    background:-ms-linear-gradient(top, #000035 5%, #000035 100%);
    background:linear-gradient(to bottom, #000035 5%, #000035 100%);
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#000035', endColorstr='#000035',GradientType=0);
    background-color:#000035;
}
.myButton:active {
    position:relative;
    top:1px;
}

    </style>

  <body>
<table align="center">
  <tr >
  <br><br><br><br><br><br><br><br><br>
                </td>
                <td style=" border-style: none" colspan="19"> <img src="../../../login/images/logo.jpg"  width="300px"  height="100px" alt="Logo SALC.SPA"></td>
            </tr>
            </table>
  </body>
</html>
<?php } ?>

Я прилагаю фотографию моих результатов ..

Экран

Ответы [ 2 ]

0 голосов
/ 14 апреля 2019 
while($row = $result->fetch_assoc()) {
        echo '<table align="center" border="0px" width = "1300px">';
        echo '<tr align="center">';
        echo '<td><a class="myButton" href="sceltaOperazione.php?idCantiere=' . $row["idCantiere"] . '">' . $row["nomeCantiere"] . '</a></td>';
        echo'</tr>';
        echo '</table>';
}

Переместить все, кроме строки <td>, за пределы цикла while.То, что у вас есть, создает новую таблицу для каждой строки в базе данных.Перемещая все, вы создадите новый столбец для каждой строки.

0 голосов
/ 14 апреля 2019

Вы можете использовать css grid или flexbox, поместить свои кнопки в div и стилизовать его: 

div {
  display: flex;
}

Вы также можете посмотреть это руководство, чтобы понять, как оно работает, и изучить некоторые полезные атрибуты, чтобы лучше его настроить: https://css -tricks.com / snippets / css / a-guide-to-flexbox /

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

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

...