Question

我有一个简单的HTML表格，其中列出了顶部的时间和侧面的房间。目前，当单击一个单元格时，您将被重定向到预订表单。

我要做的是点击单元格时，在该列顶部的相应标题中占用时间，并在侧面列出房间号，并使用php在html表单上自动填充这些字段。（时间字段当前是组合框，我不确定是否应将这些更改为文本字段，因为表格的标题跨越两次; 10：00-10：30）

我到处寻找解决方案，但没有发现任何可以回答我的问题。如果有人知道如何做到这一点，我将非常感谢您的建议。

HTML表格代码示例：

<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 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>

Answer 1

我认为你正在尝试做innerHTML应该用于什么。而不是这样做：

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

哪个会重定向您的整个页面，您应该尝试以下内容：

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

将页面发送到驻留在该TD中的DIV。为了记录，这仍然有点笨拙。但它应该以正确的方式引导你。

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

1 个答案: