Question

当我尝试执行ParentNode.children时，说无法读取未定义的属性“ 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（9PM）之内，所以没有行，这将导致空值。
该行是表单元格（td）的集合，因此您需要对其进行迭代以将style属性分别应用于每个单元格。

我通过将时间硬编码为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?

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

2 个答案: