Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [PHP][MySQL][JavaScript]Tworzenie dynamicznej tabeli zapisów
Forum PHP.pl > Forum > Przedszkole
matijenko
Witam. Moim celem jest stworzenie planu dnia w formie dynamicznej tabeli. Chciałbym aby użytkownik klikając w daną komórkę mógł zapisać się na daną godzinę i dany dzień. Niestety nie wiem jak się za to konkretnie zabrać. Mam stworzoną tabelę w HTML-u. Czy mógłby ktoś podpowiedzieć jakie kroki mam dalej podjąć? Za co się wziąć itp.?

  1. <!DOCTYPE HTML>
  2. <html lang="pl">
  3. <meta charset="utf-8" />
  4. <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
  5.  
  6. <link rel="stylesheet" href="tabela.css" type="text/css"/>
  7.  
  8. </head>
  9. <table align="center" border="2" cellpadding="10">
  10. <caption><h1 class="opis" >Plan dnia Moli</h1></caption>
  11. <tr>
  12. <th> <img src="img/moli.jpg" width="150px" height="120px"/> </th> <th>Poniedziałek</th> <th>Wtorek</th> <th>Środa</th> <th>Czwartek</th> <th>Piątek</th>
  13. </tr>
  14. <tr>
  15. <th>Godzina 8-10</th> <td align="center">...</td> <td align="center">...</td> <td align="center">...</td> <td align="center">...</td> <td align="center">...</td>
  16. </tr>
  17. <tr>
  18. <th>Godzina 10-12</th> <td align="center">...</td> <td align="center">...</td> <td align="center">...</td> <td align="center">...</td> <td align="center">...</td>
  19. </tr>
  20. <tr>
  21. <th>Godzina 12-14</th> <td align="center">...</td> <td align="center">...</td> <td align="center">...</td> <td align="center">...</td> <td align="center">...</td>
  22. </tr>
  23. <tr>
  24. <th>Godzina 16-18</th> <td align="center">...</td> <td align="center">...</td> <td align="center">...</td> <td align="center">...</td> <td align="center">...</td>
  25. </tr>
  26. <tr>
  27. <th>Godzina 18-20</th> <td align="center">...</td> <td align="center">...</td> <td align="center">...</td> <td align="center">...</td> <td align="center">...</td>
  28. </tr>
  29. </table>
  30. </body>
  31. </html>
trzczy
contenteditable
js event typu input
ajax
php
matijenko
Można coś więcej na ten temat?
Malukaz
musisz to javascriptem obsłużyć, obecnie twój poziom wiedzy wskazuje na spore braki w tym temacie, polecam na początek ( mimo iż nie powinienem bo to badziew ) nauczyć sie jQuery
marekgolan
Ew możesz użyć gotowca. Ja sobie np chwale ten skrypt: http://preview.codecanyon.net/item/ajax-fu...preview/3985692
matijenko
Próbuję ale coś niestety nie wychodzi. Stworzyłem co nie co, ale zero efektów. W kodzie istnieje na pewno wiele błędów sciana.gif Czy mógłby ktoś powiedzieć dlaczego nie zapisuje mi danych w bazie, gdzie istnieją błędy i jak je rozwiązać oraz czego brakuje? Poniżej widnieje kod z pliku connect1.php i inne pliki.

Kod
<?php

    $host ="localhost";
    $db_user ="root";
    $db_password ="";
    $db_name ="panellogowania";
    
    $db = mysqli_connect($host, $db_user, $db_password, $db_name);
    
    if (mysqli_connect_errno())
    {
        echo 'Błąd';
    }
    else
    {
    }
?>


  1. <!DOCTYPE HTML>
  2. <html lang="pl">
  3. <meta charset="utf-8" />
  4. <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
  5.  
  6. <title> Schronisko 4steps </title>
  7. <meta name="keywords" content="psy, opieka, schronisko, karma, wyżywienie, radość" />
  8. <script src="/js/jquery-1.11.1.min.js"></script>
  9. <script src="/js/skrypt.js"></script>
  10. <link rel="stylesheet" href="tabela.css" type="text/css"/>
  11. <link href="https://fonts.googleapis.com/css?family=Great+Vibes|Modak|Nosifer|Open+Sans|Revalia|Ribeye+Marrow|Roboto|Work+San
    s&amp;subset=latin-ext"
    rel="stylesheet">
  12.  
  13. </head>
  14. <table align="center" border="1" cellpadding="10">
  15. <caption><h1 class="opis" >Plan dnia Moli</h1></caption>
  16. <tr>
  17. <th> <img src="img/moli.jpg" width="150px" height="120px"/> </th> <th>Poniedziałek</th> <th>Wtorek</th> <th>Środa</th> <th>Czwartek</th> <th>Piątek</th> <th>Sobota</th> <th>Niedziela</th>
  18. </tr>
  19. <tr>
  20. <th>Godzina 8-10</th> <td align="center" bgcolor="#36b03c" id="btn" class="btn btn-primary"> </td> <td align="center" bgcolor="#36b03c">...</td> <td align="center" bgcolor="#36b03c">...</td> <td align="center" bgcolor="#36b03c">...</td> <td align="center" bgcolor="#36b03c">...</td> <td align="center" bgcolor="#36b03c">...</td> <td align="center" bgcolor="#36b03c">...</td>
  21. </tr>
  22. <tr>
  23. <th>Godzina 10-12</th> <td align="center" bgcolor="#36b03c">...</td> <td align="center" bgcolor="#36b03c">...</td> <td align="center" bgcolor="#36b03c">...</td> <td align="center" bgcolor="#36b03c">...</td> <td align="center" bgcolor="#36b03c">...</td> <td align="center" bgcolor="#36b03c">...</td> <td align="center" bgcolor="#36b03c">...</td>
  24. </tr>
  25. <tr>
  26. <th>Godzina 12-14</th> <td align="center" bgcolor="#36b03c">...</td> <td align="center" bgcolor="#36b03c">...</td> <td align="center" bgcolor="#36b03c">...</td> <td align="center" bgcolor="#36b03c">...</td> <td align="center" bgcolor="#36b03c">...</td> <td align="center" bgcolor="#36b03c">...</td> <td align="center" bgcolor="#36b03c">...</td>
  27. </tr>
  28. <tr>
  29. <th>Godzina 16-18</th> <td align="center" bgcolor="#36b03c">...</td> <td align="center" bgcolor="#36b03c">...</td> <td align="center" bgcolor="#36b03c">...</td> <td align="center" bgcolor="#36b03c">...</td> <td align="center" bgcolor="#36b03c">...</td> <td align="center" bgcolor="#36b03c">...</td> <td align="center" bgcolor="#36b03c">...</td>
  30. </tr>
  31. <tr>
  32. <th>Godzina 18-20</th> <td align="center" bgcolor="#36b03c">...</td> <td align="center" bgcolor="#36b03c">...</td> <td align="center" bgcolor="#36b03c">...</td> <td align="center" bgcolor="#36b03c">...</td> <td align="center" bgcolor="#36b03c">...</td> <td align="center" bgcolor="#36b03c">...</td> <td align="center" bgcolor="#36b03c">...</td>
  33. </tr>
  34. </table>
  35. <a href="#"><input type="button" value="Poprzedni"/></a>
  36. <a href="#"><input type="button" value="Następny"/></a>
  37. <script src="js/scripts.js"></script>
  38. </body>
  39. </html>


  1. <?php
  2. require_once('connect1.php');
  3. $nick = $_POST['nick'];
  4. function filtrowanie($zmienna)
  5. {
  6. $zmienna = trim($zmienna);
  7. $zmienna = stripcslashes($zmienna);
  8. $zmienna = htmlspecialchars($zmienna);
  9. return $zmienna;
  10. }
  11. $wartosc_z_listy_post=$_POST['klucz_ajax'];
  12. $wartosc_z_listy_post_filtr=filtrowanie($wartosc_z_listy_post);
  13. $pobierz_usera = ("SELECT id FROM uzytkownicy WHERE user='$nick'");
  14. $wynik_pobierz = mysqli_query($db, $pobierz_usera);
  15. $zapytanie_wyslij = "INSERT INTO zapisy VALUES ('$nick','$imie_psa','$data','$godzina')";
  16. $wynik_wyslij = mysqli_query($db, $zapytanie_wyslij);
  17. ?>


Kod
$('#btn').click(function onBtnClick()
{
var btn = $('#lista').val();

$.ajax({
    type:"POST",
    url: "wyslij.php",
    data: {klucz_ajax:btn},
        success: function onBtnClick()
        {
            alert('Zapisałeś się na termin!');
            btn.style.backgroundColor = 'red';
        
            btn.removeEventListener('click', onBtnClick)
            $("#btn").attr("disabled", true);
        },
            btn.addEventListener('click', onBtnClick);
            error: function onBtnClick(blad)
            {
                alert("Wystąpił błąd");
                console.log(blad);
            }
    });
});
To jest wersja lo-fi głównej zawartości. Aby zobaczyć pełną wersję z większą zawartością, obrazkami i formatowaniem proszę kliknij tutaj.
Invision Power Board © 2001-2025 Invision Power Services, Inc.