gpt4 book ai didi

javascript - 当我尝试执行 ParentNode.children 时,显示无法读取未定义的属性 'children'

转载 作者:行者123 更新时间:2023-12-02 22:16:40 29 4
gpt4 key购买 nike

当我尝试执行 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>

最佳答案

这里有一些事情:

  • 您希望使用 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>

关于javascript - 当我尝试执行 ParentNode.children 时,显示无法读取未定义的属性 'children',我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/59366584/

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