单击html表格单元格时填充表单

I have a simple HTML table with times listed across the top and rooms down the side. At the moment, when a cell is clicked you are redirected to a booking form.

What I am trying to do is when the cell is clicked, take the time in the corresponding heading across top of that column and the room number listed down the side and auto populate these fields on the html form using php. (The time fields are currently combo boxes, I am not sure if these should be changed to a text field given that the headers of table span two times; 10:00-10:30)

I have looked everywhere for a solution to this and have found nothing that answers my question. If anyone knows how this can be done I would really appreciate your advice.

Example HTML table code:

<table>
<tr>
            <th>Time</th>
            <th>9.00 - 9.30</th>
            <th>9.30 - 10.00</th>
            <th>10.00 - 10.30</th>
            <th>10.30 - 11.00</th>
            <th>11.00 - 11.30</th>
            <th>12.00 - 12.30</th>
            <th>12.30 - 13.00</th>
            <th>13.00 - 13.30</th>
            <th>13.30 - 14.00 </th>
            <th>14.00 - 14.30</th>
            <th>14.30 - 15.00</th>
            <th>15.00 - 15.30</th>
            <th>15.30 - 16.00</th>
            <th>16.00 - 16.30</th>
            <th>16.30 - 17.00</th>
            <th>17.00 - 17.30</th>
            <th>17.30 - 18.00</th>
        </tr>


        <tr>
            <th>Room1</th>

                <td onClick="document.location.href='http://localhost/booking_form.html';"></td>
                <td onClick="document.location.href='http://localhost/booking_form.html';"></td>
                <td onClick="document.location.href='http://localhost/booking_form.html';"></td>
                <td onClick="document.location.href='http://localhost/booking_form.html';"></td>
                <td onClick="document.location.href='http://localhost/booking_form.html';"></td>
                <td onClick="document.location.href='http://localhost/booking_form.html';"></td>
                <td onClick="document.location.href='http://localhost/booking_form.html';"></td>
                </tr>

HTML form:

<form action="post.php" method="post">
            <label>Name</label>
            <input name="name" type="text">

            <label>Student Number</label>
            <input name="number" type="number">

            <label>Floor</label>
            <input name="floor" type="text">

            <label>Room</label>
            <input name="room" type="decimal">

            <label>From</label>
            <select name="timefrom" class="timefrom">
            <option></option>
            <option value="09:00">09:00</option>
            <option value="09:30">09:30</option>
            <option value="10:00">10:00</option>
            <option value="10:30">10:30</option>
            <option value="11:00">11:00</option>
            <option value="11:30">11:30</option>
            <option value="12:00">12:00</option>
            <option value="12:30">12:30</option>
            <option value="13:00">13:00</option>
            <option value="13:30">13:30</option>
            <option value="14:00">14:00</option>
            <option value="14:30">14:30</option>
            <option value="15:00">15:00</option>
            <option value="15:30">15:30</option>
            <option value="16:00">16:00</option>
            <option value="16:30">16:30</option>
            <option value="17:00">17:00</option>
            <option value="17:30">17:30</option>
            <option value="18:00">18:00</option>
            </select>

            <label> To</label>
            <select name="timeto" class="timeto">
            <option></option>
            <option value="09:00">09:00</option>
            <option value="09:30">09:30</option>
            <option value="10:00">10:00</option>
            <option value="10:30">10:30</option>
            <option value="11:00">11:00</option>
            <option value="11:30">11:30</option>
            <option value="12:00">12:00</option>
            <option value="12:30">12:30</option>
            <option value="13:00">13:00</option>
            <option value="13:30">13:30</option>
            <option value="14:00">14:00</option>
            <option value="14:30">14:30</option>
            <option value="15:00">15:00</option>
            <option value="15:30">15:30</option>
            <option value="16:00">16:00</option>
            <option value="16:30">16:30</option>
            <option value="17:00">17:00</option>
            <option value="17:30">17:30</option>
            <option value="18:00">18:00</option>
            </select>

            <label> Date</label>
            <input type="date" name="date">

            <br>
            <br>
            <input type="submit" value="Book" onClick="alert('Booking created');">

        </form>

I think you are trying to do what an innerHTML should be used for. Rather than doing this:

<td onClick="document.location.href='http://localhost/booking_form.html';">

Which will redirect your entire page, you should try something like:

<td onClick="document.getElementById('thisContent').innerHTML='http://localhost/booking_form.html';"><div id="thisContent"></div></td>

Which will send the page into the DIV that resides in that TD. For the record, that's still kind of clumsy. But it should steer you the right way.