The Web Design Group

... Making the Web accessible to all.

Welcome Guest ( Log In | Register )

 
Reply to this topicStart new topic
> POPULATE FIRST COLUMN OF TABLE WITH CURRENT MONTH DATES
shankar from vizag
post Feb 10 2020, 09:00 AM
Post #1


Advanced Member
****

Group: Members
Posts: 202
Joined: 18-June 13
Member No.: 19,316



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
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
CharlesEF
post Feb 12 2020, 06:29 PM
Post #2


Programming Fanatic
********

Group: Members
Posts: 1,981
Joined: 27-April 13
From: Edinburg, Texas
Member No.: 19,088



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.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
CharlesEF
post Feb 15 2020, 12:56 AM
Post #3


Programming Fanatic
********

Group: Members
Posts: 1,981
Joined: 27-April 13
From: Edinburg, Texas
Member No.: 19,088



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.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
shankar from vizag
post Feb 16 2020, 12:14 AM
Post #4


Advanced Member
****

Group: Members
Posts: 202
Joined: 18-June 13
Member No.: 19,316



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
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post

Reply to this topicStart new topic
2 User(s) are reading this topic (2 Guests and 0 Anonymous Users)
0 Members:

 



- Lo-Fi Version Time is now: 18th March 2024 - 11:30 PM