Help - Search - Members - Calendar
Full Version: POPULATE FIRST COLUMN OF TABLE WITH CURRENT MONTH DATES
HTMLHelp Forums > Programming > Client-side Scripting
shankar from vizag
Greetings

I need a table with current month dates in its first column e.g. the table should contain all 29 dates in its first column means 29 rows being the current month is Feb.

How could this happen ?

Kindly guide me.

Thank you
Shankar sb
CharlesEF
There are several ways to do that. Since you showed no code at all I'm not sure which approach to suggest. You could do a web search to find an answer. When you post a question it is ALWAYS better to show your code.
CharlesEF
I haven't heard from you but here is a sample:
CODE
<!DOCTYPE HTML>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width">
<title>Add Table Rows - Example</title>
</head>
<body>
<table id="myTable" style="width:100%">
<thead>
  <tr>
   <th id="month" style="width:25%">Day of</th>
   <th style="width:25%">Column 2</th>
   <th style="width:25%">Column 3</th>
   <th style="width:25%">Column 4</th>
  </tr>
</thead>
<tbody>
</tbody>
<tfoot>
  <tr>
   <th colspan="4">Some footer data!</th>
  </tr>
</tfoot>
</table>
<script>
window.onload = function()
{
  var months = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"];
  var today = new Date();
  // Get last day of current month
  var days = new Date(today.getFullYear(), today.getMonth() + 1, 1 - 1, 0, 0, 0, 0).getDate();
  document.getElementById("month").innerHTML = "Day of " + months[today.getMonth()];
  // Get a reference to table <tbody> element
  var tableRef = document.getElementById("myTable").getElementsByTagName("tbody")[0];
  for(var i = 1; i <= +days; i++)
  {
   // Create an empty <tr> element in table body at the last row:
   var row = tableRef.insertRow();
   // Insert new cells (<td> elements) at the 1st and 2nd position of the "new" <tr> element:
   var cell1 = row.insertCell(0);
   var cell2 = row.insertCell(1);
   var cell3 = row.insertCell(2);
   var cell4 = row.insertCell(3);
   // Add some text to the new cells:
   cell1.innerHTML = i.toString().length < 2 ? "0" + i : i;
   cell2.innerHTML = "ROW " + i + " COLUMN 2";
   cell3.innerHTML = "ROW " + i + " COLUMN 3";
   cell4.innerHTML = "ROW " + i + " COLUMN 4";
  }
}
</script>
</body>
</html>

Hope this helps.
shankar from vizag
QUOTE(CharlesEF @ Feb 15 2020, 11:26 AM) *

I haven't heard from you but here is a sample:
CODE
<!DOCTYPE HTML>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width">
<title>Add Table Rows - Example</title>
</head>
<body>
<table id="myTable" style="width:100%">
<thead>
  <tr>
   <th id="month" style="width:25%">Day of</th>
   <th style="width:25%">Column 2</th>
   <th style="width:25%">Column 3</th>
   <th style="width:25%">Column 4</th>
  </tr>
</thead>
<tbody>
</tbody>
<tfoot>
  <tr>
   <th colspan="4">Some footer data!</th>
  </tr>
</tfoot>
</table>
<script>
window.onload = function()
{
  var months = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"];
  var today = new Date();
  // Get last day of current month
  var days = new Date(today.getFullYear(), today.getMonth() + 1, 1 - 1, 0, 0, 0, 0).getDate();
  document.getElementById("month").innerHTML = "Day of " + months[today.getMonth()];
  // Get a reference to table <tbody> element
  var tableRef = document.getElementById("myTable").getElementsByTagName("tbody")[0];
  for(var i = 1; i <= +days; i++)
  {
   // Create an empty <tr> element in table body at the last row:
   var row = tableRef.insertRow();
   // Insert new cells (<td> elements) at the 1st and 2nd position of the "new" <tr> element:
   var cell1 = row.insertCell(0);
   var cell2 = row.insertCell(1);
   var cell3 = row.insertCell(2);
   var cell4 = row.insertCell(3);
   // Add some text to the new cells:
   cell1.innerHTML = i.toString().length < 2 ? "0" + i : i;
   cell2.innerHTML = "ROW " + i + " COLUMN 2";
   cell3.innerHTML = "ROW " + i + " COLUMN 3";
   cell4.innerHTML = "ROW " + i + " COLUMN 4";
  }
}
</script>
</body>
</html>

Hope this helps.



Thank you so much charles
This is a "lo-fi" version of our main content. To view the full version with more information, formatting and images, please click here.
Invision Power Board © 2001-2020 Invision Power Services, Inc.