JSFiddle - React, Tailwind, and code Playground

by bthorn

HTML

<div id="divYears"></div>

JavaScript

var currentYear = new Date().getFullYear();

        var years = [];

        for (var i = currentYear; i > currentYear - 3; i--) {
            years.push(i);
        }

        months = [
          { number: '01', title: 'January' },
          { number: '02', title: 'February' },
          { number: '03', title: 'March' },
          { number: '04', title: 'April' },
          { number: '05', title: 'May' },
          { number: '06', title: 'June' },
          { number: '07', title: 'July' },
          { number: '08', title: 'August' },
          { number: '09', title: 'September' },
          { number: '10', title: 'October' },
          { number: '11', title: 'November' },
          { number: '12', title: 'December' }
        ];


        var strYears = "<table class='table-light'>";
        strYears += "<tr>";

        for(var i in years){
            strYears += "<th><h2>"+ years[i] +"</h2></th>";
        }
        strYears += "</tr>";

        for(var m in months){
            strYears += "<tr>";
            for(var year in years){


                strYears += "<td class='text-center'>";
                //<a target="_blank" class="link"
                //href="http://docweb/RedDawg/substationinfolist.aspx?dir=\\srp.gov\shares\POBShare\srp\pob\doc\DOC Logs\{{ year }} LOGS\{{ month.number }} - {{ year }}\&file=pdf">{{ month.title }}</a>
                strYears += months[m].title;
                strYears += "</td>";

            }
            strYears += "</tr>";

        }    
        strYears += "</table>";
        
        $("#divYears").html(strYears);