如何使用javascript在帶有<td>元素的表中顯示當前月份的日期？-有解無憂

通過網站上的表格格式顯示月份日期的最佳方式是什么(<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>

uj5u.com熱心網友回復：

createElement您可以使用andappendChild創建帶有日期的標簽，而不是登錄到控制臺，<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

轉載請註明出處，本文鏈接：https://www.uj5u.com/caozuo/435018.html

標籤：javascript html

上一篇：在javascript中使用filter()來實作curriable()是可行的，但是，uisngmap()是可行的，為什么？

下一篇：當提交按鈕在模態視窗中時，表單不起作用