如何使用 javascript 在包含元素的表格中显示当前月份的日期？

Question

在网站上通过表格(<table>, <td> elements)的格式显示月份日期的最佳方式是什么？

我目前已经设置了一个 for 循环，在控制台中显示 3 月的当前日期，但我不知道如何在网站上显示它（截至目前，它是 3 月，所以我想显示所有 31 天） .

代码：

 let date = new Date(); const daysEl = document.getElementById('dates'); const monthsEl = document.getElementById('months'); function display_days_of_the_month() { var month = date.getMonth() + 1; var year = date.getFullYear(); for (day = 0; day <= days_in_month; day++) { console.log(day); return day; } daysEl.innerHTML = day; // how can I display the dates? } function get_days_in_month(month, year) { days_in_month = new Date(year, month, 0).getDate(); return days_in_month; } console.log(get_days_in_month(3, 2022)); console.log(get_days_in_month(2, 2022)); display_days_of_the_month();

 table, th, td { border: 1px solid; padding: 10px; } th { background-color:rgb(245, 143, 143); } td:hover { background-color: rgb(178, 172, 187); color: rgb(255, 255, 255); }

 <,DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width. initial-scale=1.0" /> <link rel="stylesheet" href="style.css" /> <script src="script.js" defer></script> <title>Habit Tracker</title> </head> <body> <h1>HABIT TRACKER</h1> <h2 id="month">Month</h2> <table> <thead id="days_of_week"> <th>Monday</th> <!-- table head ROW --> <th>Tuesday</th> <!-- table head ROW --> <th>Wednesday</th> <!-- table head ROW --> <th>Thursday</th> <!-- table head ROW --> <th>Friday</th> <!-- table head ROW --> <th>Saturday</th> <!-- table head ROW --> <th>Sunday</th> </thead> <tbody id="dates"> <tr> <td>Date</td> <td>Date</td> <td>Date</td> <td>Date</td> <td>Date</td> <td>Date</td> <td>Date</td> </tr> <tr> <td>Date</td> <td>Date</td> <td>Date</td> <td>Date</td> <td>Date</td> <td>Date</td> <td>Date</td> </tr> <tr> <td>Date</td> <td>Date</td> <td>Date</td> <td>Date</td> <td>Date</td> <td>Date</td> <td>Date</td> </tr> <tr> <td>Date</td> <td>Date</td> <td>Date</td> <td>Date</td> <td>Date</td> <td>Date</td> <td>Date</td> </tr> <tr> <td>Date</td> <td>Date</td> <td>Date</td> <td>Date</td> <td>Date</td> <td>Date</td> <td>Date</td> </tr> <!-- rowspan column span --> </tbody> </table> </body> </html>

Answer 1

在 tbody 标签中，可以为周创建 static tr 标签，或者也可以通过 append 子动态

在 week tr 标签中，可以 append 子动态。

尝试这个：

 var date = new Date(); var currentDay = date.getDay(); var totalDays = new Date(date.getFullYear(), date.getMonth()+1, 0).getDate(); let week0 = document.createElement("week0"); let tbody = document.querySelector('#dates'); tbody.appendChild(week0); for (day = 0; day < currentDay; day++) { let new_td = document.createElement("td"); let table_row = document.querySelector('#week0'); table_row.appendChild(new_td); new_td.innerText = ""; } for (day = 0; day <totalDays; day++) { let new_td = document.createElement("td"); let table_row = document.querySelector('#week'+parseInt((day+currentDay)/7)); table_row.appendChild(new_td) new_td.innerText = day+1; }

 table, th, td { border: 1px solid; padding: 10px; } th { background-color:rgb(245, 143, 143); } td:hover { background-color: rgb(178, 172, 187); color: rgb(255, 255, 255); }

 <,DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width. initial-scale=1.0" /> <link rel="stylesheet" href="style.css" /> <script src="script.js" defer></script> <title>Habit Tracker</title> </head> <body> <h1>HABIT TRACKER</h1> <h2 id="month">Month</h2> <table> <thead id="days_of_week"> <th>Sunday</th> <th>Monday</th> <th>Tuesday</th> <th>Wednesday</th> <th>Thursday</th> <th>Friday</th> <th>Saturday</th> </thead> <tbody id="dates"> <tr id="week0"></tr> <tr id="week1"></tr> <tr id="week2"></tr> <tr id="week3"></tr> <tr id="week4"></tr> </tbody> </table> </body> </html>

Answer 2

您可以使用createElement和appendChild创建带有日期的<Td>标签，而不是登录到控制台，例如：

<table>
  <tr id="somerow"></tr>
</table>

let my_date = "12 march" // just an example

let new_td = document.createElement("td")
let table_row = document.querySelector("#somerow")
table_row.appendChild(new_td)
new_td.innerText = my_date

如何使用 javascript 在包含元素的表格中显示当前月份的日期？

问题描述

2 个解决方案

解决方案1
1 已采纳 2022-03-01 16:18:43

解决方案2
0 2022-03-01 14:27:57

如何使用 javascript 在包含元素的表格中显示当前月份的日期？

问题描述

2 个解决方案

解决方案1 1 已采纳 2022-03-01 16:18:43

解决方案2 0 2022-03-01 14:27:57

解决方案1
1 已采纳 2022-03-01 16:18:43

解决方案2
0 2022-03-01 14:27:57