如何根据某些条件使用jQuery动态将信息放在表上？

Question

Let's imagine that I have to make a table with the following structure with PHP. Every cell identified with NamedayHour is just an indicator ( Mon0, Mon1, and so on for every day ). I should put information on that cells, that is different for every day and hour.

The whole structure is something like this :

<table border="1" >
<th>Hour</th>
<th>Mon 25-06-2012</th>
<th>Tue 26-06-2012</th>
<th>Wed 27-06-2012</th>
<th>Thu 28-06-2012</th>
<th>Fri 29-06-2012</th>
<tr><td>8:00</td><td>Mon0</td><td>Tue0</td><td>Wed0</td><td>Thu0</td><td>Fri0</tr>
<tr><td>8:20</td><td>Mon1</td><td>Tue1</td><td>Wed1</td><td>Thu1</td><td>Fri1</tr>
<tr><td>8:40</td><td>Mon2</td><td>Tue2</td><td>Wed2</td><td>Thu2</td><td>Fri2</tr>
<tr><td>9:00</td><td>Mon3</td><td>Tue3</td><td>Wed3</td><td>Thu3</td><td>Fri3</tr>
<tr><td>9:20</td><td>Mon4</td><td>Tue4</td><td>Wed4</td><td>Thu4</td><td>Fri4</tr>
<tr><td>9:40</td><td>Mon5</td><td>Tue5</td><td>Wed5</td><td>Thu5</td><td>Fri5</tr>
</table>    

So, I have the arrays:

$hoursMonday = array("8:00", "8:20", "8:40")
$hoursMondayAssigned = array("8:00", "8:20")
$hoursMondayAvailable = array("8:40")

I have these 3 arrays for every day from Monday to Friday.

Then I need to write the hours in the table for every day. For example, in this case, I need to put on the cell for Monday and hour: 8:40 the text "Available", and for "8:00" and "8:20" I should put on the column Monday for these hours, the system should put "Busy" for both of them.

The resulting table, using the arrays of the example, should be like the following table:

<table border="1" >
<th>Hour</th>
<th>Mon 25-06-2012</th>
<th>Tue 26-06-2012</th>
<th>Wed 27-06-2012</th>
<th>Thu 28-06-2012</th>
<th>Fri 29-06-2012</th>
<tr><td>8:00</td><td>BUSY</td><td>Tue0</td><td>Wed0</td><td>Thu0</td><td>Fri0</tr>
<tr><td>8:20</td><td>BUSY</td><td>Tue1</td><td>Wed1</td><td>Thu1</td><td>Fri1</tr>
<tr><td>8:40</td><td>AVAILABLE</td><td>Tue2</td><td>Wed2</td><td>Thu2</td><td>Fri2</tr>
<tr><td>9:00</td><td>Mon3</td><td>Tue3</td><td>Wed3</td><td>Thu3</td><td>Fri3</tr>
<tr><td>9:20</td><td>Mon4</td><td>Tue4</td><td>Wed4</td><td>Thu4</td><td>Fri4</tr>
<tr><td>9:40</td><td>Mon5</td><td>Tue5</td><td>Wed5</td><td>Thu5</td><td>Fri5</tr>
</table>
</html>

I would like to use jQuery, or just PHP to solve this.

One of the things to note, is that the parameter of frequency ( in this case 10 minutes ) might vary. If the frequency is set to 30 minutes, for example, the times will be: 8:00 , 8:30, 9:00, 9:30 and so on.

I don't really know how to solve this using jQuery. I know how to write the table using a for loop, but complexity is leveling up when I need to put the information on the correct cell depending of the day and hour.

Thanks.

Answer 1

You could do the following in PHP to find out for each hour if it's assigned already or free:

$hoursMonday = array("8:00", "8:20", "8:40");
$hoursMondayAssigned = array("8:00", "8:20");
$hoursMondayAvailable = array("8:40");

foreach( $hoursMonday AS $hour ) {
    if( in_array( $hour, $hoursMondayAssigned ) ) {
        echo 'Busy at ' . $hour;
    } else if ( in_array( $hour, $hoursMondayAvailable ) ) {
        echo 'Free at ' . $hour;
    }
}

To automate looping through all the days I would suggest using a recursive array for each day, for example:

$monday = array(
    'free' => array(
        '08:40', '09:00'
    ),

    'busy' => array(
        '08:40',
    ),

    'free' => array(
        '09:00',
    ),
);