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

Question

我正在尝试根据用户对用户选择和输入的选项的输入，适合输入的 time 和日期突出显示。

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

Answer 1

获取selectedTime，然后获取tr中第child的所有td's，将textContent与selectedTime匹配。如果匹配，将样式应用于 time td 然后获取它的 parentElement，获取其所有 children 并将 className or textContent 与 selectedDay 匹配。

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>

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

Based off user input in calendar, highlighting time and day of week

javascript

forms

calendar

options