gpt4 book ai didi

javascript - 基于日历中的用户输入,突出显示时间和星期几

转载 作者:行者123 更新时间:2023-12-04 10:50:28 24 4
gpt4 key购买 nike

我试图根据用户对用户选择和输入的选项的输入来实现它,突出显示适合输入的时间和日期的单元格。

现在,我正在尝试这样做,以便获取一周中某一天的选项文本,并使用该文本进行搜索 <td>具有该文本的类的元素,并将其设置为变量单元格。然后,我为包含与当时选项文本相同 id 的元素设置一个变量,然后获取该元素的父节点及其子元素。在 child 中,它搜索 <td>也在可变单元格中的元素。

<!DOCTYPE html>
<html lang="en-us">

<head>
<title>calendar</title>
<meta charset="UTF-8">
<style>
</style>
</head>

<body>
<p>Enter information for your appointments below</p>
<form>
<select id="dayweek">
<option>Sunday</option>
<option>Monday</option>
<option>Tuesday</option>
<option>Wensday</option>
<option>Thursday</option>
<option>Friday</option>
<option>Saturday</option>
</select>
<p>Select day of week</p>
<select id="thetime">
<option>8:00 AM</option>
<option>8:30 AM</option>
<option>9:00 AM</option>
<option>9:30 AM</option>
<option>10:00 AM</option>
<option>10:30 AM</option>
<option>11:00 AM</option>
<option>11:30 AM</option>
<option>12:00 PM</option>
<option>12:30 PM</option>
<option>1:00 PM</option>
<option>13:00 PM</option>
<option>13:30 PM</option>
<option>14:00 PM</option>
<option>14:30 PM</option>
<option>15:00 PM</option>
<option>15:30 PM</option>
<option>16:00 PM</option>
<option>16:30 PM</option>
<option>17:00 PM</option>
<option>17:30 PM</option>
<option>18:00 PM</option>
<option>18:30 PM</option>
<option>19:00 PM</option>
<option>19:30 PM</option>
<option>20:00 PM</option>
</select>
</form>
<button type="button" id="enterAppointments" onclick="enterAppointments()">Enter appointments</button>
<table class="tg">
<tr>
<th>time</th>
<th>sun</th>
<th>mon</th>
<th>tue</th>
<th>wed</th>
<th>thu</th>
<th>fri</th>
<th>sat</th>
</tr>
<tr>
<td id="8:00AM">8:00 AM</td>
<td class="Sunday"></td>
<td class="Monday"></td>
<td class="Tuesday"></td>
<td class="Wensday"></td>
<td class="Thursday"></td>
<td class="Friday"></td>
<td class="Saturday"></td>
</tr>
<tr>
<td id="8:30AM">8:30 AM</td>
<td class="Sunday"></td>
<td class="Monday"></td>
<td class="Tuesday"></td>
<td class="Wensday"></td>
<td class="Thursday"></td>
<td class="Friday"></td>
<td class="Saturday"></td>
</tr>
<tr>
<td id="9:00AM">9:00 AM</td>
<td class="Sunday"></td>
<td class="Monday"></td>
<td class="Tuesday"></td>
<td class="Wensday"></td>
<td class="Thursday"></td>
<td class="Friday"></td>
<td class="Saturday"></td>
</tr>
<tr>
<td id="9:30AM">9:30 AM</td>
<td class="Sunday"></td>
<td class="Monday"></td>
<td class="Tuesday"></td>
<td class="Wensday"></td>
<td class="Thursday"></td>
<td class="Friday"></td>
<td class="Saturday"></td>
</tr>
<tr>
<td id="10:00AM">10:00 AM</td>
<td class="Sunday"></td>
<td class="Monday"></td>
<td class="Tuesday"></td>
<td class="Wensday"></td>
<td class="Thursday"></td>
<td class="Friday"></td>
<td class="Saturday"></td>
</tr>
<tr>
<td id="10:30AM">10:30 AM</td>
<td class="Sunday"></td>
<td class="Monday"></td>
<td class="Tuesday"></td>
<td class="Wensday"></td>
<td class="Thursday"></td>
<td class="Friday"></td>
<td class="Saturday"></td>
</tr>
<tr>
<td id="11:00AM">11:00 AM</td>
<td class="Sunday"></td>
<td class="Monday"></td>
<td class="Tuesday"></td>
<td class="Wensday"></td>
<td class="Thursday"></td>
<td class="Friday"></td>
<td class="Saturday"></td>
</tr>
<tr>
<td id="11:30AM">11:30 AM</td>
<td class="Sunday"></td>
<td class="Monday"></td>
<td class="Tuesday"></td>
<td class="Wensday"></td>
<td class="Thursday"></td>
<td class="Friday"></td>
<td class="Saturday"></td>
</tr>
<tr>
<td id="12:00PM">12:00 PM</td>
<td class="Sunday"></td>
<td class="Monday"></td>
<td class="Tuesday"></td>
<td class="Wensday"></td>
<td class="Thursday"></td>
<td class="Friday"></td>
<td class="Saturday"></td>
</tr>
<tr>
<td id="12:30PM">12:30 PM</td>
<td class="Sunday"></td>
<td class="Monday"></td>
<td class="Tuesday"></td>
<td class="Wensday"></td>
<td class="Thursday"></td>
<td class="Friday"></td>
<td class="Saturday"></td>
</tr>
<tr>
<td id="13:00PM">1:00 PM</td>
<td class="Sunday"></td>
<td class="Monday"></td>
<td class="Tuesday"></td>
<td class="Wensday"></td>
<td class="Thursday"></td>
<td class="Friday"></td>
<td class="Saturday"></td>
</tr>
<tr>
<td id="13:30PM">1:30 PM</td>
<td class="Sunday"></td>
<td class="Monday"></td>
<td class="Tuesday"></td>
<td class="Wensday"></td>
<td class="Thursday"></td>
<td class="Friday"></td>
<td class="Saturday"></td>
</tr>
<tr>
<td id="14:00PM">2:00 PM</td>
<td class="Sunday"></td>
<td class="Monday"></td>
<td class="Tuesday"></td>
<td class="Wensday"></td>
<td class="Thursday"></td>
<td class="Friday"></td>
<td class="Saturday"></td>
</tr>
<tr>
<td id="14:30PM">2:30 PM</td>
<td class="Sunday"></td>
<td class="Monday"></td>
<td class="Tuesday"></td>
<td class="Wensday"></td>
<td class="Thursday"></td>
<td class="Friday"></td>
<td class="Saturday"></td>
</tr>
<tr>
<td id="15:00PM">3:00 PM</td>
<td class="Sunday"></td>
<td class="Monday"></td>
<td class="Tuesday"></td>
<td class="Wensday"></td>
<td class="Thursday"></td>
<td class="Friday"></td>
<td class="Saturday"></td>
</tr>
<tr>
<td id="15:30PM">3:30 PM</td>
<td class="Sunday"></td>
<td class="Monday"></td>
<td class="Tuesday"></td>
<td class="Wensday"></td>
<td class="Thursday"></td>
<td class="Friday"></td>
<td class="Saturday"></td>
</tr>
<tr>
<td id="16:00PM">4:00 PM</td>
<td class="Sunday"></td>
<td class="Monday"></td>
<td class="Tuesday"></td>
<td class="Wensday"></td>
<td class="Thursday"></td>
<td class="Friday"></td>
<td class="Saturday"></td>
</tr>
<tr>
<td id="16:30PM">4:30 PM</td>
<td class="Sunday"></td>
<td class="Monday"></td>
<td class="Tuesday"></td>
<td class="Wensday"></td>
<td class="Thursday"></td>
<td class="Friday"></td>
<td class="Saturday"></td>
</tr>
<tr>
<td id="17:00PM">5:00 PM</td>
<td class="Sunday"></td>
<td class="Monday"></td>
<td class="Tuesday"></td>
<td class="Wensday"></td>
<td class="Thursday"></td>
<td class="Friday"></td>
<td class="Saturday"></td>
</tr>
<tr>
<td id="17:30PM">5:30 PM</td>
<td class="Sunday"></td>
<td class="Monday"></td>
<td class="Tuesday"></td>
<td class="Wensday"></td>
<td class="Thursday"></td>
<td class="Friday"></td>
<td class="Saturday"></td>
</tr>
<tr>
<td id="18:00PM">6:00 PM</td>
<td class="Sunday"></td>
<td class="Monday"></td>
<td class="Tuesday"></td>
<td class="Wensday"></td>
<td class="Thursday"></td>
<td class="Friday"></td>
<td class="Saturday"></td>
</tr>
<tr>
<td id="18:30PM">6:30 PM</td>
<td class="Sunday"></td>
<td class="Monday"></td>
<td class="Tuesday"></td>
<td class="Wensday"></td>
<td class="Thursday"></td>
<td class="Friday"></td>
<td class="Saturday"></td>
</tr>
<tr>
<td id="19:00PM">7:00 PM</td>
<td class="Sunday"></td>
<td class="Monday"></td>
<td class="Tuesday"></td>
<td class="Wensday"></td>
<td class="Thursday"></td>
<td class="Friday"></td>
<td class="Saturday"></td>
</tr>
<tr>
<td id="19:30PM">7:30 PM</td>
<td class="Sunday"></td>
<td class="Monday"></td>
<td class="Tuesday"></td>
<td class="Wensday"></td>
<td class="Thursday"></td>
<td class="Friday"></td>
<td class="Saturday"></td>
</tr>
<tr>
<td id="20:00PM">8:00 PM</td>
<td class="Sunday"></td>
<td class="Monday"></td>
<td class="Tuesday"></td>
<td class="Wensday"></td>
<td class="Thursday"></td>
<td class="Friday"></td>
<td class="Saturday"></td>
</tr>
</table>
<script>
var x = document.getElementById("dayweek");
var z = document.getElementById("thetime");
var i = x.selectedIndex;
var a = z.selectedIndex;

function enterAppointments() {
var classy = x.options[i].text
var timeoption = z.options[a].text
var timeoption1 = document.getElementById(timeoption).parentNode.children;
var cell = document.querySelectorAll('table td.classy ');
var cells;
for (var i = 0; i < cell.length; i++) {
var cells = cell[i]
timeoption1[cells].style.color = 'red';
}

}
</script>
</body>

</html>

最佳答案

获取 selectedTime ,然后获取所有 td'str 的第一个 child , 匹配 textContent与 selectedTime。如果匹配,将样式应用于 time td然后得到 parentElement其中,获取其所有子项并匹配 className or textContentselectedDay .

function enterAppointments() {
/** Remove previously selected styles */
document.querySelectorAll('td[style]').forEach(td => td.style.color = '');

const selectedTime = document.querySelector('#thetime').value;
const selectedDay = document.querySelector('#dayweek').value;
const timeTds = document.querySelectorAll('td:first-child');

[...timeTds].forEach(td => {
if(td.textContent === selectedTime) {
td.style.color = "blue";

[...td.parentElement.children].forEach(td => {
if(td.className == selectedDay) {
td.style.color = "yellow";
}
});
}
});
}
<p>Enter information for your appointments below</p>
<form>
<select id="dayweek">
<option>Sunday</Sundayoption>
<option>Monday</Mondayoption>
<option>Tuesday</Tuesdayoption>
<option>Wensday</Wensdayoption>
<option>Thursday</Thursdayoption>
<option>Friday</Fridayoption>
<option>Saturday</Saturdayoption>
</select>
<p>Select day of week</p>
<select id="thetime">
<option>8:00 AM</option>
<option>8:30 AM</option>
<option>9:00 AM</option>
<option>9:30 AM</option>
<option>10:00 AM</option>
<option>10:30 AM</option>
<option>11:00 AM</option>
<option>11:30 AM</option>
<option>12:00 PM</option>
<option>12:30 PM</option>
<option>1:00 PM</option>
<option>13:00 PM</option>
<option>13:30 PM</option>
<option>14:00 PM</option>
<option>14:30 PM</option>
<option>15:00 PM</option>
<option>15:30 PM</option>
<option>16:00 PM</option>
<option>16:30 PM</option>
<option>17:00 PM</option>
<option>17:30 PM</option>
<option>18:00 PM</option>
<option>18:30 PM</option>
<option>19:00 PM</option>
<option>19:30 PM</option>
<option>20:00 PM</option>
</select>
</form>
<button type="button" id="enterAppointments" onclick="enterAppointments()">Enter appointments</button>
<table class="tg">
<tr>
<th>time</th>
<th>sun</th>
<th>mon</th>
<th>tue</th>
<th>wed</th>
<th>thu</th>
<th>fri</th>
<th>sat</th>
</tr>
<tr>
<td id="8:00AM">8:00 AM</td>
<td class="Sunday">Sunday</td>
<td class="Monday">Monday</td>
<td class="Tuesday">Tuesday</td>
<td class="Wensday">Wensday</td>
<td class="Thursday">Thursday</td>
<td class="Friday">Friday</td>
<td class="Saturday">Saturday</td>
</tr>
<tr>
<td id="8:30AM">8:30 AM</td>
<td class="Sunday">Sunday</td>
<td class="Monday">Monday</td>
<td class="Tuesday">Tuesday</td>
<td class="Wensday">Wensday</td>
<td class="Thursday">Thursday</td>
<td class="Friday">Friday</td>
<td class="Saturday">Saturday</td>
</tr>
<tr>
<td id="9:00AM">9:00 AM</td>
<td class="Sunday">Sunday</td>
<td class="Monday">Monday</td>
<td class="Tuesday">Tuesday</td>
<td class="Wensday">Wensday</td>
<td class="Thursday">Thursday</td>
<td class="Friday">Friday</td>
<td class="Saturday">Saturday</td>
</tr>
<tr>
<td id="9:30AM">9:30 AM</td>
<td class="Sunday">Sunday</td>
<td class="Monday">Monday</td>
<td class="Tuesday">Tuesday</td>
<td class="Wensday">Wensday</td>
<td class="Thursday">Thursday</td>
<td class="Friday">Friday</td>
<td class="Saturday">Saturday</td>
</tr>
<tr>
<td id="10:00AM">10:00 AM</td>
<td class="Sunday">Sunday</td>
<td class="Monday">Monday</td>
<td class="Tuesday">Tuesday</td>
<td class="Wensday">Wensday</td>
<td class="Thursday">Thursday</td>
<td class="Friday">Friday</td>
<td class="Saturday">Saturday</td>
</tr>
<tr>
<td id="10:30AM">10:30 AM</td>
<td class="Sunday">Sunday</td>
<td class="Monday">Monday</td>
<td class="Tuesday">Tuesday</td>
<td class="Wensday">Wensday</td>
<td class="Thursday">Thursday</td>
<td class="Friday">Friday</td>
<td class="Saturday">Saturday</td>
</tr>
<tr>
<td id="11:00AM">11:00 AM</td>
<td class="Sunday">Sunday</td>
<td class="Monday">Monday</td>
<td class="Tuesday">Tuesday</td>
<td class="Wensday">Wensday</td>
<td class="Thursday">Thursday</td>
<td class="Friday">Friday</td>
<td class="Saturday">Saturday</td>
</tr>
<tr>
<td id="11:30AM">11:30 AM</td>
<td class="Sunday">Sunday</td>
<td class="Monday">Monday</td>
<td class="Tuesday">Tuesday</td>
<td class="Wensday">Wensday</td>
<td class="Thursday">Thursday</td>
<td class="Friday">Friday</td>
<td class="Saturday">Saturday</td>
</tr>
<tr>
<td id="12:00PM">12:00 PM</td>
<td class="Sunday">Sunday</td>
<td class="Monday">Monday</td>
<td class="Tuesday">Tuesday</td>
<td class="Wensday">Wensday</td>
<td class="Thursday">Thursday</td>
<td class="Friday">Friday</td>
<td class="Saturday">Saturday</td>
</tr>
<tr>
<td id="12:30PM">12:30 PM</td>
<td class="Sunday">Sunday</td>
<td class="Monday">Monday</td>
<td class="Tuesday">Tuesday</td>
<td class="Wensday">Wensday</td>
<td class="Thursday">Thursday</td>
<td class="Friday">Friday</td>
<td class="Saturday">Saturday</td>
</tr>
<tr>
<td id="13:00PM">1:00 PM</td>
<td class="Sunday">Sunday</td>
<td class="Monday">Monday</td>
<td class="Tuesday">Tuesday</td>
<td class="Wensday">Wensday</td>
<td class="Thursday">Thursday</td>
<td class="Friday">Friday</td>
<td class="Saturday">Saturday</td>
</tr>
<tr>
<td id="13:30PM">1:30 PM</td>
<td class="Sunday">Sunday</td>
<td class="Monday">Monday</td>
<td class="Tuesday">Tuesday</td>
<td class="Wensday">Wensday</td>
<td class="Thursday">Thursday</td>
<td class="Friday">Friday</td>
<td class="Saturday">Saturday</td>
</tr>
<tr>
<td id="14:00PM">2:00 PM</td>
<td class="Sunday">Sunday</td>
<td class="Monday">Monday</td>
<td class="Tuesday">Tuesday</td>
<td class="Wensday">Wensday</td>
<td class="Thursday">Thursday</td>
<td class="Friday">Friday</td>
<td class="Saturday">Saturday</td>
</tr>
<tr>
<td id="14:30PM">2:30 PM</td>
<td class="Sunday">Sunday</td>
<td class="Monday">Monday</td>
<td class="Tuesday">Tuesday</td>
<td class="Wensday">Wensday</td>
<td class="Thursday">Thursday</td>
<td class="Friday">Friday</td>
<td class="Saturday">Saturday</td>
</tr>
<tr>
<td id="15:00PM">3:00 PM</td>
<td class="Sunday">Sunday</td>
<td class="Monday">Monday</td>
<td class="Tuesday">Tuesday</td>
<td class="Wensday">Wensday</td>
<td class="Thursday">Thursday</td>
<td class="Friday">Friday</td>
<td class="Saturday">Saturday</td>
</tr>
<tr>
<td id="15:30PM">3:30 PM</td>
<td class="Sunday">Sunday</td>
<td class="Monday">Monday</td>
<td class="Tuesday">Tuesday</td>
<td class="Wensday">Wensday</td>
<td class="Thursday">Thursday</td>
<td class="Friday">Friday</td>
<td class="Saturday">Saturday</td>
</tr>
<tr>
<td id="16:00PM">4:00 PM</td>
<td class="Sunday">Sunday</td>
<td class="Monday">Monday</td>
<td class="Tuesday">Tuesday</td>
<td class="Wensday">Wensday</td>
<td class="Thursday">Thursday</td>
<td class="Friday">Friday</td>
<td class="Saturday">Saturday</td>
</tr>
<tr>
<td id="16:30PM">4:30 PM</td>
<td class="Sunday">Sunday</td>
<td class="Monday">Monday</td>
<td class="Tuesday">Tuesday</td>
<td class="Wensday">Wensday</td>
<td class="Thursday">Thursday</td>
<td class="Friday">Friday</td>
<td class="Saturday">Saturday</td>
</tr>
<tr>
<td id="17:00PM">5:00 PM</td>
<td class="Sunday">Sunday</td>
<td class="Monday">Monday</td>
<td class="Tuesday">Tuesday</td>
<td class="Wensday">Wensday</td>
<td class="Thursday">Thursday</td>
<td class="Friday">Friday</td>
<td class="Saturday">Saturday</td>
</tr>
<tr>
<td id="17:30PM">5:30 PM</td>
<td class="Sunday">Sunday</td>
<td class="Monday">Monday</td>
<td class="Tuesday">Tuesday</td>
<td class="Wensday">Wensday</td>
<td class="Thursday">Thursday</td>
<td class="Friday">Friday</td>
<td class="Saturday">Saturday</td>
</tr>
<tr>
<td id="18:00PM">6:00 PM</td>
<td class="Sunday">Sunday</td>
<td class="Monday">Monday</td>
<td class="Tuesday">Tuesday</td>
<td class="Wensday">Wensday</td>
<td class="Thursday">Thursday</td>
<td class="Friday">Friday</td>
<td class="Saturday">Saturday</td>
</tr>
<tr>
<td id="18:30PM">6:30 PM</td>
<td class="Sunday">Sunday</td>
<td class="Monday">Monday</td>
<td class="Tuesday">Tuesday</td>
<td class="Wensday">Wensday</td>
<td class="Thursday">Thursday</td>
<td class="Friday">Friday</td>
<td class="Saturday">Saturday</td>
</tr>
<tr>
<td id="19:00PM">7:00 PM</td>
<td class="Sunday">Sunday</td>
<td class="Monday">Monday</td>
<td class="Tuesday">Tuesday</td>
<td class="Wensday">Wensday</td>
<td class="Thursday">Thursday</td>
<td class="Friday">Friday</td>
<td class="Saturday">Saturday</td>
</tr>
<tr>
<td id="19:30PM">7:30 PM</td>
<td class="Sunday">Sunday</td>
<td class="Monday">Monday</td>
<td class="Tuesday">Tuesday</td>
<td class="Wensday">Wensday</td>
<td class="Thursday">Thursday</td>
<td class="Friday">Friday</td>
<td class="Saturday">Saturday</td>
</tr>
<tr>
<td id="20:00PM">8:00 PM</td>
<td class="Sunday">Sunday</td>
<td class="Monday">Monday</td>
<td class="Tuesday">Tuesday</td>
<td class="Wensday">Wensday</td>
<td class="Thursday">Thursday</td>
<td class="Friday">Friday</td>
<td class="Saturday">Saturday</td>
</tr>
</table>

关于javascript - 基于日历中的用户输入,突出显示时间和星期几,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/59502473/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com