Pobieranie Id tabeli stworzonej w php

Question

Dzień dobry mam taki mały problem. Tworzę aktualnie aplikację do zarządzania terminami i chciałbym aby ona w tabelce wyświetlała mi zaznaczone kolorem czerwonym zajęte dni. Wszystko jest dobrze do czasu póki nie podam jedno liczbowej daty wtedy program zalicza mi także wszystkie liczby które zawierają w sobie tą liczbę. Oto kod tworzący tabelę oraz pobieranie daty oraz zmienianie jej formatu tylko na dzień: 

        $dateodDay = date("j", strtotime($_GET['dateod']));
        $datedoDay = date("j", strtotime($_GET['datedo']));;

        echo "Od: ".$dateodDay."<br>";
        echo "Do: ".$datedoDay."<br>";

        echo<<<tabelka
            <table border="1">
                <tr>
                    <td>Data</td>
                    <td>1</td>
                    <td>2</td>
                    <td>3</td>
                    <td>4</td>
                    <td>5</td>
                    <td>6</td>
                    <td>7</td>
                </tr>
        tabelka;
        for($j=1; $j<=5; $j++){
            echo "<tr>";
            if($j == "1" || $j == "2" || $j == "3" || $j == "4" || $j == "5"){
                echo "<td id="."Pokoj".$j." width='100px'; height='50px'>Pokoj ".$j."</td>";
            }

            for($i=1; $i<=7; $i++){
                echo "<td style='background-color:green;' id=".$liczbaW." width='100px'; height='50px'>".$liczbaW."</td>";
                $liczbaW++;
            }
            echo "</tr>";
        }
        echo "</table>";

oraz kod JavaScript który powinien pobierać poprawne id i przypisywać do niego style css:

    <script>
        var dateOd = '<?php echo $dateodDay; ?>';
        var dateDo = '<?php echo $datedoDay; ?>';

        var roznica = dateDo - dateOd;
        console.log(dateOd);
        console.log(dateDo);
        console.log(roznica);

        var row = document.getElementsByTagName('td');
        var len = row.length;

        for (var i=0; i<len; i++) {
            if(row[i].id >= dateOd && row[i].id <= dateDo){
                document.getElementById(row[i].id).style.backgroundColor = "red";
                console.log(row[i].id); 
            }
        }
    </script>

tak wyglądają wyniki podczas podania dat XXXX-XX-01 oraz XXXX-XX-04.

Z góry dziękuję za pomoc.

Answer 1

Wszystko jest dobrze do czasu póki nie podam jedno liczbowej daty 

 

dzieje się tak dlatego, że zapisałeś liczbę (cyfrę) w apostrofach

    var dateOd = '<?php echo $dateodDay; ?>';

    var dateDo = '<?php echo $datedoDay; ?>';

przez to javascript traktuje wartości w zmiennych dateOd i dateDo jako tekst (string)

 

 

 

BTW, propozycja nieco "uporządkowania" Twojego kodu 

<?php
  $dateodDay = date("j", strtotime('2023-01-01'));
  $datedoDay = date("j", strtotime('2023-01-04'));

  $liczbaW = 0;
  $rows = null;
  for ($j=1; $j<=5; $j++) {
    $rows .= '<tr>'
           . '  <td id="pokoj'.$j.'">Pokój '.$j.'</td>';
 
    for ($i=1; $i<=7; $i++)
      $rows .= '<td id="'.++$liczbaW.'">'.$liczbaW.'</td>';

    $rows .= '</tr>';
  }
?>

<style>
  body {
    margin: 1em;
    background-color: black;
    color: white;
  }
  table,
  th, td {
    border: 1px solid white;
  }
  table caption {
    text-align: left;
    padding: 0.5em;
  }
  table tbody td {
    text-align: center;
    background-color: green;
    width: 100px;
    height: 50px;
  }
  table tbody td[id^="pokoj"] {
    background-color: transparent;
  }
  .booked-day {
    background-color: red;
  }
</style>

<table>
  <caption>
    Od: <?php echo $dateodDay; ?><br>
    Do: <?php echo $datedoDay; ?>
  </caption>
  <thead>
    <tr>
      <th>Data</th>
      <th>1</th>
      <th>2</th>
      <th>3</th>
      <th>4</th>
      <th>5</th>
      <th>6</th>
      <th>7</th>
    </tr>
  </thead>
  <tbody>
    <?php echo $rows; ?>
  </tbody>
</table>

<script>
  const dateOd = <?php echo $dateodDay; ?>; // bez apostrofów
  const dateDo = <?php echo $datedoDay; ?>; // ----- || -----
 
  //const roznica = dateDo - dateOd;
  //console.log(dateOd, dateDo, roznica);
 
  const rows = document.querySelectorAll('tbody td'); 
  for (const row of rows)
    if (row.id >= dateOd && row.id <= dateDo)
       row.classList.add('booked-day');

</script>