当我尝试做 ParentNode.children 时，说无法读取未定义的属性“孩子”

Question

当我尝试做 ParentNode.children 时，说无法读取未定义的属性“孩子”。试图让父节点的所有子节点都具有粉红色的背景颜色。 现在，我有一张以半小时为增量的表格，根据从早上 8 点到晚上 8 点的时间，它会突出显示时间，但我希望突出显示整行。

let today = new Date();
var n = today.getHours();
var x = today.getMinutes();
if (x <= 29) {
  x = "00";
}
if (x >= 30) {
  x = "30";
}
if (n >= 12) {
  z = "PM";
} else {
  z = "AM";
}

var todayyy = n + ":" + x + z;
console.log(todayyy);

var datte = document.getElementById(todayyy).ParentNode.children;
datte.style.backgroundColor = "pink";

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

<head>
  <title>December</title>
  <meta charset="utf-8">

  <style>

  </style>
</head>

<body>
  <table class="tg">
    <tr>
      <th class="time">time</th>
      <th class="sun" id="sunday">sun</th>
      <th class="mon" id="monday">mon</th>
      <th class="tue" id="tuesday">tue</th>
      <th class="wed" id="wensday">wed</th>
      <th class="thu" id="thursday">thu</th>
      <th class="fri" id="friday">fri</th>
      <th class="sat" id="saturday">sat</th>
    </tr>
    <tr>
      <td class="date" id="8:00AM">8:00 AM</td>
      <td class="sun"></td>
      <td class="mon"></td>
      <td class="tue"></td>
      <td class="wed"></td>
      <td class="thu"></td>
      <td class="fri"></td>
      <td class="sat"></td>
    </tr>
    <tr>
      <td class="date" id="8:30AM">8:30 AM</td>
      <td class="sun"></td>
      <td class="mon"></td>
      <td class="tue"></td>
      <td class="wed"></td>
      <td class="thu"></td>
      <td class="fri"></td>
      <td class="sat"></td>
    </tr>
    <tr>
      <td class="date" id="9:00AM">9:00 AM</td>
      <td class="sun"></td>
      <td class="mon"></td>
      <td class="tue"></td>
      <td class="wed"></td>
      <td class="thu"></td>
      <td class="fri"></td>
      <td class="sat"></td>
    </tr>
    <tr>
      <td class="date" id="9:30AM">9:30 AM</td>
      <td class="sun"></td>
      <td class="mon"></td>
      <td class="tue"></td>
      <td class="wed"></td>
      <td class="thu"></td>
      <td class="fri"></td>
      <td class="sat"></td>
    </tr>
    <tr>
      <td class="date" id="10:00AM">10:00 AM</td>
      <td class="sun"></td>
      <td class="mon"></td>
      <td class="tue"></td>
      <td class="wed"></td>
      <td class="thu"></td>
      <td class="fri"></td>
      <td class="sat"></td>
    </tr>
    <tr>
      <td class="date" id="10:30AM">10:30 AM</td>
      <td class="sun"></td>
      <td class="mon"></td>
      <td class="tue"></td>
      <td class="wed"></td>
      <td class="thu"></td>
      <td class="fri"></td>
      <td class="sat"></td>
    </tr>
    <tr>
      <td class="date" id="11:00AM">11:00 AM</td>
      <td class="sun"></td>
      <td class="mon"></td>
      <td class="tue"></td>
      <td class="wed"></td>
      <td class="thu"></td>
      <td class="fri"></td>
      <td class="sat"></td>
    </tr>
    <tr>
      <td class="date" id="11:30AM">11:30 AM</td>
      <td class="sun"></td>
      <td class="mon"></td>
      <td class="tue"></td>
      <td class="wed"></td>
      <td class="thu"></td>
      <td class="fri"></td>
      <td class="sat"></td>
    </tr>
    <tr>
      <td class="date" id="12:00PM">12:00 PM</td>
      <td class="sun"></td>
      <td class="mon"></td>
      <td class="tue"></td>
      <td class="wed"></td>
      <td class="thu"></td>
      <td class="fri"></td>
      <td class="sat"></td>
    </tr>
    <tr>
      <td class="date" id="12:30PM">12:30 PM</td>
      <td class="sun"></td>
      <td class="mon"></td>
      <td class="tue"></td>
      <td class="wed"></td>
      <td class="thu"></td>
      <td class="fri"></td>
      <td class="sat"></td>
    </tr>
    <tr>
      <td class="date" id="13:00PM">1:00 PM</td>
      <td class="sun"></td>
      <td class="mon"></td>
      <td class="tue"></td>
      <td class="wed"></td>
      <td class="thu"></td>
      <td class="fri"></td>
      <td class="sat"></td>
    </tr>
    <tr>
      <td class="date" id="13:30PM">1:30 PM</td>
      <td class="sun"></td>
      <td class="mon"></td>
      <td class="tue"></td>
      <td class="wed"></td>
      <td class="thu"></td>
      <td class="fri"></td>
      <td class="sat"></td>
    </tr>
    <tr>
      <td class="date" id="14:00PM">2:00 PM</td>
      <td class="sun"></td>
      <td class="mon"></td>
      <td class="tue"></td>
      <td class="wed"></td>
      <td class="thu"></td>
      <td class="fri"></td>
      <td class="sat"></td>
    </tr>
    <tr>
      <td class="date" id="14:30PM">2:30 PM</td>
      <td class="sun"></td>
      <td class="mon"></td>
      <td class="tue"></td>
      <td class="wed"></td>
      <td class="thu"></td>
      <td class="fri"></td>
      <td class="sat"></td>
    </tr>
    <tr>
      <td class="date" id="15:00PM">3:00 PM</td>
      <td class="sun"></td>
      <td class="mon"></td>
      <td class="tue"></td>
      <td class="wed"></td>
      <td class="thu"></td>
      <td class="fri"></td>
      <td class="sat"></td>
    </tr>
    <tr>
      <td class="date" id="15:30PM">3:30 PM</td>
      <td class="sun"></td>
      <td class="mon"></td>
      <td class="tue"></td>
      <td class="wed"></td>
      <td class="thu"></td>
      <td class="fri"></td>
      <td class="sat"></td>
    </tr>
    <tr>
      <td class="date" id="16:00PM">4:00 PM</td>
      <td class="sun"></td>
      <td class="mon"></td>
      <td class="tue"></td>
      <td class="wed"></td>
      <td class="thu"></td>
      <td class="fri"></td>
      <td class="sat"></td>
    </tr>
    <tr>
      <td class="date" id="16:30PM">4:30 PM</td>
      <td class="sun"></td>
      <td class="mon"></td>
      <td class="tue"></td>
      <td class="wed"></td>
      <td class="thu"></td>
      <td class="fri"></td>
      <td class="sat"></td>
    </tr>
    <tr>
      <td class="date" id="17:00PM">5:00 PM</td>
      <td class="sun"></td>
      <td class="mon"></td>
      <td class="tue"></td>
      <td class="wed"></td>
      <td class="thu"></td>
      <td class="fri"></td>
      <td class="sat"></td>
    </tr>
    <tr>
      <td class="date" id="17:30PM">5:30 PM</td>
      <td class="sun"></td>
      <td class="mon"></td>
      <td class="tue"></td>
      <td class="wed"></td>
      <td class="thu"></td>
      <td class="fri"></td>
      <td class="sat"></td>
    </tr>
    <tr>
      <td class="date" id="18:00PM">6:00 PM</td>
      <td class="sun"></td>
      <td class="mon"></td>
      <td class="tue"></td>
      <td class="wed"></td>
      <td class="thu"></td>
      <td class="fri"></td>
      <td class="sat"></td>
    </tr>
    <tr>
      <td class="date" id="18:30PM">6:30 PM</td>
      <td class="sun"></td>
      <td class="mon"></td>
      <td class="tue"></td>
      <td class="wed"></td>
      <td class="thu"></td>
      <td class="fri"></td>
      <td class="sat"></td>
    </tr>
    <tr>
      <td class="date" id="19:00PM">7:00 PM</td>
      <td class="sun"></td>
      <td class="mon"></td>
      <td class="tue"></td>
      <td class="wed"></td>
      <td class="thu"></td>
      <td class="fri"></td>
      <td class="sat"></td>
    </tr>
    <tr>
      <td class="date" id="19:30PM">7:30 PM</td>
      <td class="sun"></td>
      <td class="mon"></td>
      <td class="tue"></td>
      <td class="wed"></td>
      <td class="thu"></td>
      <td class="fri"></td>
      <td class="sat"></td>
    </tr>
    <tr>
      <td class="date" id="20:00PM">8:00 PM</td>
      <td class="sun"></td>
      <td class="mon"></td>
      <td class="tue"></td>
      <td class="wed"></td>
      <td class="thu"></td>
      <td class="fri"></td>
      <td class="sat"></td>
    </tr>
  </table>

Answer 1

这里有几件事：

• 您希望使用parentNode（小写parent）而不是ParentNode
• 表格行是自动生成的还是总是在晚上 8 点停止？因为现在是在东部时间 21:00（晚上 9 点）内，所以没有行，这将导致空值。
• 该行是表格单元格 (td) 的集合，因此您需要遍历它们以将样式属性分别应用于每个单元格。

我稍微修改了您的代码，将时间硬编码为 1600 小时，然后为每个单元格应用样式。这会给你想要的结果吗？

let today = new Date();
var n = today.getHours();
var x = today.getMinutes();
if (x <= 29) {
  x = "00";
}
if (x >= 30) {
  x = "30";
}
if (n >= 12) {
  z = "PM";
} else {
  z = "AM";
}

var todayyy = n + ":" + x + z;
todayyy = '16:00PM';  // TESTING!!!
console.log(todayyy);

var datte = document.getElementById(todayyy).parentNode.children;
console.log(datte);

// iterate over each table cell in the row to apply style
for (var i = 0; i < datte.length; i++) {
  datte[i].style.backgroundColor = "pink";
}

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

<head>
  <title>December</title>
  <meta charset="utf-8">

  <style>

  </style>
</head>

<body>
  <table class="tg">
    <tr>
      <th class="time">time</th>
      <th class="sun" id="sunday">sun</th>
      <th class="mon" id="monday">mon</th>
      <th class="tue" id="tuesday">tue</th>
      <th class="wed" id="wensday">wed</th>
      <th class="thu" id="thursday">thu</th>
      <th class="fri" id="friday">fri</th>
      <th class="sat" id="saturday">sat</th>
    </tr>
    <tr>
      <td class="date" id="8:00AM">8:00 AM</td>
      <td class="sun"></td>
      <td class="mon"></td>
      <td class="tue"></td>
      <td class="wed"></td>
      <td class="thu"></td>
      <td class="fri"></td>
      <td class="sat"></td>
    </tr>
    <tr>
      <td class="date" id="8:30AM">8:30 AM</td>
      <td class="sun"></td>
      <td class="mon"></td>
      <td class="tue"></td>
      <td class="wed"></td>
      <td class="thu"></td>
      <td class="fri"></td>
      <td class="sat"></td>
    </tr>
    <tr>
      <td class="date" id="9:00AM">9:00 AM</td>
      <td class="sun"></td>
      <td class="mon"></td>
      <td class="tue"></td>
      <td class="wed"></td>
      <td class="thu"></td>
      <td class="fri"></td>
      <td class="sat"></td>
    </tr>
    <tr>
      <td class="date" id="9:30AM">9:30 AM</td>
      <td class="sun"></td>
      <td class="mon"></td>
      <td class="tue"></td>
      <td class="wed"></td>
      <td class="thu"></td>
      <td class="fri"></td>
      <td class="sat"></td>
    </tr>
    <tr>
      <td class="date" id="10:00AM">10:00 AM</td>
      <td class="sun"></td>
      <td class="mon"></td>
      <td class="tue"></td>
      <td class="wed"></td>
      <td class="thu"></td>
      <td class="fri"></td>
      <td class="sat"></td>
    </tr>
    <tr>
      <td class="date" id="10:30AM">10:30 AM</td>
      <td class="sun"></td>
      <td class="mon"></td>
      <td class="tue"></td>
      <td class="wed"></td>
      <td class="thu"></td>
      <td class="fri"></td>
      <td class="sat"></td>
    </tr>
    <tr>
      <td class="date" id="11:00AM">11:00 AM</td>
      <td class="sun"></td>
      <td class="mon"></td>
      <td class="tue"></td>
      <td class="wed"></td>
      <td class="thu"></td>
      <td class="fri"></td>
      <td class="sat"></td>
    </tr>
    <tr>
      <td class="date" id="11:30AM">11:30 AM</td>
      <td class="sun"></td>
      <td class="mon"></td>
      <td class="tue"></td>
      <td class="wed"></td>
      <td class="thu"></td>
      <td class="fri"></td>
      <td class="sat"></td>
    </tr>
    <tr>
      <td class="date" id="12:00PM">12:00 PM</td>
      <td class="sun"></td>
      <td class="mon"></td>
      <td class="tue"></td>
      <td class="wed"></td>
      <td class="thu"></td>
      <td class="fri"></td>
      <td class="sat"></td>
    </tr>
    <tr>
      <td class="date" id="12:30PM">12:30 PM</td>
      <td class="sun"></td>
      <td class="mon"></td>
      <td class="tue"></td>
      <td class="wed"></td>
      <td class="thu"></td>
      <td class="fri"></td>
      <td class="sat"></td>
    </tr>
    <tr>
      <td class="date" id="13:00PM">1:00 PM</td>
      <td class="sun"></td>
      <td class="mon"></td>
      <td class="tue"></td>
      <td class="wed"></td>
      <td class="thu"></td>
      <td class="fri"></td>
      <td class="sat"></td>
    </tr>
    <tr>
      <td class="date" id="13:30PM">1:30 PM</td>
      <td class="sun"></td>
      <td class="mon"></td>
      <td class="tue"></td>
      <td class="wed"></td>
      <td class="thu"></td>
      <td class="fri"></td>
      <td class="sat"></td>
    </tr>
    <tr>
      <td class="date" id="14:00PM">2:00 PM</td>
      <td class="sun"></td>
      <td class="mon"></td>
      <td class="tue"></td>
      <td class="wed"></td>
      <td class="thu"></td>
      <td class="fri"></td>
      <td class="sat"></td>
    </tr>
    <tr>
      <td class="date" id="14:30PM">2:30 PM</td>
      <td class="sun"></td>
      <td class="mon"></td>
      <td class="tue"></td>
      <td class="wed"></td>
      <td class="thu"></td>
      <td class="fri"></td>
      <td class="sat"></td>
    </tr>
    <tr>
      <td class="date" id="15:00PM">3:00 PM</td>
      <td class="sun"></td>
      <td class="mon"></td>
      <td class="tue"></td>
      <td class="wed"></td>
      <td class="thu"></td>
      <td class="fri"></td>
      <td class="sat"></td>
    </tr>
    <tr>
      <td class="date" id="15:30PM">3:30 PM</td>
      <td class="sun"></td>
      <td class="mon"></td>
      <td class="tue"></td>
      <td class="wed"></td>
      <td class="thu"></td>
      <td class="fri"></td>
      <td class="sat"></td>
    </tr>
    <tr>
      <td class="date" id="16:00PM">4:00 PM</td>
      <td class="sun"></td>
      <td class="mon"></td>
      <td class="tue"></td>
      <td class="wed"></td>
      <td class="thu"></td>
      <td class="fri"></td>
      <td class="sat"></td>
    </tr>
    <tr>
      <td class="date" id="16:30PM">4:30 PM</td>
      <td class="sun"></td>
      <td class="mon"></td>
      <td class="tue"></td>
      <td class="wed"></td>
      <td class="thu"></td>
      <td class="fri"></td>
      <td class="sat"></td>
    </tr>
    <tr>
      <td class="date" id="17:00PM">5:00 PM</td>
      <td class="sun"></td>
      <td class="mon"></td>
      <td class="tue"></td>
      <td class="wed"></td>
      <td class="thu"></td>
      <td class="fri"></td>
      <td class="sat"></td>
    </tr>
    <tr>
      <td class="date" id="17:30PM">5:30 PM</td>
      <td class="sun"></td>
      <td class="mon"></td>
      <td class="tue"></td>
      <td class="wed"></td>
      <td class="thu"></td>
      <td class="fri"></td>
      <td class="sat"></td>
    </tr>
    <tr>
      <td class="date" id="18:00PM">6:00 PM</td>
      <td class="sun"></td>
      <td class="mon"></td>
      <td class="tue"></td>
      <td class="wed"></td>
      <td class="thu"></td>
      <td class="fri"></td>
      <td class="sat"></td>
    </tr>
    <tr>
      <td class="date" id="18:30PM">6:30 PM</td>
      <td class="sun"></td>
      <td class="mon"></td>
      <td class="tue"></td>
      <td class="wed"></td>
      <td class="thu"></td>
      <td class="fri"></td>
      <td class="sat"></td>
    </tr>
    <tr>
      <td class="date" id="19:00PM">7:00 PM</td>
      <td class="sun"></td>
      <td class="mon"></td>
      <td class="tue"></td>
      <td class="wed"></td>
      <td class="thu"></td>
      <td class="fri"></td>
      <td class="sat"></td>
    </tr>
    <tr>
      <td class="date" id="19:30PM">7:30 PM</td>
      <td class="sun"></td>
      <td class="mon"></td>
      <td class="tue"></td>
      <td class="wed"></td>
      <td class="thu"></td>
      <td class="fri"></td>
      <td class="sat"></td>
    </tr>
    <tr>
      <td class="date" id="20:00PM">8:00 PM</td>
      <td class="sun"></td>
      <td class="mon"></td>
      <td class="tue"></td>
      <td class="wed"></td>
      <td class="thu"></td>
      <td class="fri"></td>
      <td class="sat"></td>
    </tr>
  </table>

Answer 2

.parentNode 的第一个字符应该是小写的。此外，您可以省略 .children，因为 parentNode 将为您提供要突出显示的整个

行。选择子节点意味着您必须单独遍历每个节点。

https://developer.mozilla.org/en-US/docs/Web/API/ParentNode/children#Example

这是修改后的代码行：

var datte = document.getElementById(todayyy).parentNode;

另外，请记住，html id 属性应以字母 [a-zA-Z] 开头。 What are valid values for the id attribute in HTML?

【讨论】：