Printable Version of Topic

Click here to view this topic in its original format

HTMLHelp Forums _ Client-side Scripting _ POPULATE FIRST COLUMN OF TABLE WITH CURRENT MONTH DATES

Posted by: shankar from vizag Feb 10 2020, 09:00 AM

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

Posted by: CharlesEF Feb 12 2020, 06:29 PM

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.

Posted by: CharlesEF Feb 15 2020, 12:56 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.

Posted by: shankar from vizag Feb 16 2020, 12:14 AM

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

Powered by Invision Power Board (http://www.invisionboard.com)
© Invision Power Services (http://www.invisionpower.com)