个人中心
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's是 tr 的第一个 child , 匹配 textContent与 selectedTime。如果匹配，将样式应用于 time td然后得到 parentElement其中，获取其所有子项并匹配 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>

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

24 4 0
文章推荐： nginx - 在变量中设置相同的域名不适用于 nginx 中的多个位置 block
文章推荐： laravel - 合并使用相同ID的多个对象
文章推荐： C 结构初始化 : strange way
文章推荐： java - SonarQube 8.1.0 在访问值之前提示 Call "Optional#isPresent()"
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com