通过Javascript在html的表格单元格中插入选择框

Question

I am trying to generate a grid kind of sheet with Javascript using table but the selectbox is not getting displayed in all the cells but only in last cell. Why? Here is my working code:

 /**
     * @param {int} The month number, 0 based
     * @param {int} The year, not zero based, required to account for leap years
     * @return {Date[]} List with date objects for each day of the month
     */
    function getDaysInMonth(month, year) {
         // Since no month has fewer than 28 days
         var date = new Date(year, month, 1);
         var days = [];
         console.log('month', month, 'date.getMonth()', date.getMonth())
         while (date.getMonth() === month) {
            days.push(new Date(date));
            date.setDate(date.getDate() + 1);
         }
         return days;
    }



//console.log(getDaysInMonth(4, 2012));

var days = getDaysInMonth(0,2016);
var feb = getDaysInMonth(1,2016);
var mar = getDaysInMonth(2,2016);
var apr = getDaysInMonth(3,2016);
var may = getDaysInMonth(4,2016);
var jun = getDaysInMonth(5,2016);
var jul = getDaysInMonth(6,2016);
var aug = getDaysInMonth(7,2016);
var sep = getDaysInMonth(8,2016);
var oct = getDaysInMonth(9,2016);
var nov = getDaysInMonth(10,2016);
var dec = getDaysInMonth(11,2016);

var str="";
var feb_str="";
var mar_str="";
var apr_str="";
var may_str="";
var jun_str="";
var jul_str="";
var aug_str="";
var sep_str="";
var oct_str="";
var nov_str="";
var dec_str="";


//console.log(days.length+"ffffffffffffffff");

for( i=0;i<days.length;i++){
str = str+days[i];
}

for( i=0;i<feb.length;i++){
feb_str = feb_str+feb[i];
}

for( i=0;i<mar.length;i++){
mar_str = mar_str+mar[i];
}

for( i=0;i<apr.length;i++){
apr_str = apr_str+apr[i];
}

for( i=0;i<may.length;i++){
may_str = may_str+may[i];
}

for( i=0;i<jun.length;i++){
jun_str = jun_str+jun[i];
}

for( i=0;i<jul.length;i++){
jul_str = jul_str+jul[i];
}

for( i=0;i<aug.length;i++){
aug_str = aug_str+aug[i];
}

for( i=0;i<sep.length;i++){
sep_str = sep_str+sep[i];
}

for( i=0;i<oct.length;i++){
oct_str = oct_str+oct[i];
}

for( i=0;i<nov.length;i++){
nov_str = nov_str+nov[i];
}

for( i=0;i<dec.length;i++){
dec_str = dec_str+dec[i];
}

/*
Tue May 01 2012 
*/


//console.log("string is"+str+"....end");

var myRe = /\w\w\w\s\w\w\w\s\d\d\s\d\d\d\d/;
/*

var res = str.match(/\w\w\w\s\w\w\w\s\d\d\s\d\d\d\d/g);
var feb_res = feb_str.match(/\w\w\w\s\w\w\w\s\d\d\s\d\d\d\d/g);
var mar_res = mar_str.match(/\w\w\w\s\w\w\w\s\d\d\s\d\d\d\d/g);
var apr_res = apr_str.match(/\w\w\w\s\w\w\w\s\d\d\s\d\d\d\d/g);
var may_res = may_str.match(/\w\w\w\s\w\w\w\s\d\d\s\d\d\d\d/g);
var jun_res = jun_str.match(/\w\w\w\s\w\w\w\s\d\d\s\d\d\d\d/g);
var jul_res = jul_str.match(/\w\w\w\s\w\w\w\s\d\d\s\d\d\d\d/g);
var aug_res = aug_str.match(/\w\w\w\s\w\w\w\s\d\d\s\d\d\d\d/g);
var sep_res = sep_str.match(/\w\w\w\s\w\w\w\s\d\d\s\d\d\d\d/g);
var oct_res = oct_str.match(/\w\w\w\s\w\w\w\s\d\d\s\d\d\d\d/g);
var nov_res = nov_str.match(/\w\w\w\s\w\w\w\s\d\d\s\d\d\d\d/g);
var dec_res = dec_str.match(/\w\w\w\s\w\w\w\s\d\d\s\d\d\d\d/g);

*/

var res = str.match(/\w\w\w\s\w\w\w\s\d\d\s\d\d\d\d/g);
var feb_res = feb_str.match(/\w\w\w\s\w\w\w\s\d\d\s\d\d\d\d/g);
var mar_res = mar_str.match(/\w\w\w\s\w\w\w\s\d\d\s\d\d\d\d/g);
var apr_res = apr_str.match(/\w\w\w\s\w\w\w\s\d\d\s\d\d\d\d/g);
var may_res = may_str.match(/\w\w\w\s\w\w\w\s\d\d\s\d\d\d\d/g);
var jun_res = jun_str.match(/\w\w\w\s\w\w\w\s\d\d\s\d\d\d\d/g);
var jul_res = jul_str.match(/\w\w\w\s\w\w\w\s\d\d\s\d\d\d\d/g);
var aug_res = aug_str.match(/\w\w\w\s\w\w\w\s\d\d\s\d\d\d\d/g);
var sep_res = sep_str.match(/\w\w\w\s\w\w\w\s\d\d\s\d\d\d\d/g);
var oct_res = oct_str.match(/\w\w\w\s\w\w\w\s\d\d\s\d\d\d\d/g);
var nov_res = nov_str.match(/\w\w\w\s\w\w\w\s\d\d\s\d\d\d\d/g);
var dec_res = dec_str.match(/\w\w\w\s\w\w\w\s\d\d\s\d\d\d\d/g);

console.log(res);
console.log(feb_res);
console.log(mar_res);
console.log(apr_res);
console.log(may_res);
console.log(jun_res);
console.log(jul_res);
console.log(aug_res);
console.log(sep_res);
console.log(oct_res);
console.log(nov_res);
console.log(dec_res);


**function GenerateTable(param_days) {

    //Create a HTML Table element.
    var table = document.createElement("TABLE");
    table.border = "1";

    //Get the count of columns.
    var columnCount = param_days.length;
    console.log("+++++++++"+param_days.length+"++++++++++");



   //Add the header row.
    var row = table.insertRow(-1);
    for (var i = 0; i < columnCount; i++) {
        var headerCell = document.createElement("TH");
        headerCell.innerHTML = param_days[i];
        row.appendChild(headerCell);
    }
row = table.insertRow(-1);


   //Create array of options to be added
   var array = ["Volvo","Saab","Mercades","Audi"];

if( param_days == feb_res)    {   var dvTable = document.getElementById("febdvTable");}

else if(param_days == mar_res){   var dvTable = document.getElementById("mardvTable");}

else if(param_days == apr_res){   var dvTable = document.getElementById("aprdvTable");}

else if(param_days == may_res){   var dvTable = document.getElementById("maydvTable");}

else if(param_days == jun_res){   var dvTable = document.getElementById("jundvTable");}

else if(param_days == jul_res){   var dvTable = document.getElementById("juldvTable");}

else if(param_days == aug_res){   var dvTable = document.getElementById("augdvTable");}

else if(param_days == sep_res){   var dvTable = document.getElementById("sepdvTable");}

else if(param_days == oct_res){   var dvTable = document.getElementById("octdvTable");}

else if(param_days == nov_res){   var dvTable = document.getElementById("novdvTable");}

else if(param_days == dec_res){   var dvTable = document.getElementById("decdvTable");}

else  {  var dvTable = document.getElementById("dvTable"); }

    //dvTable.innerHTML = "";
    dvTable.appendChild(table);


  //Create and append select list
   var selectList = document.createElement("select");
   selectList.setAttribute("id", "mySelect");
   //dvTable.appendChild(selectList);

   for (var i = 0; i < array.length; i++) {
   var option = document.createElement("option");
   option.setAttribute("value", array[i]);
   option.text = array[i];
   selectList.appendChild(option);
   }

  //Add the data rows.
    for (var i = 0; i < param_days.length; i++) {

        var cell = row.insertCell();
        cell.appendChild(selectList);

        }



}

GenerateTable(res);
GenerateTable(feb_res);
GenerateTable(mar_res);
GenerateTable(apr_res);
GenerateTable(may_res);
GenerateTable(jun_res);
GenerateTable(jul_res);
GenerateTable(aug_res);
GenerateTable(sep_res);
GenerateTable(oct_res);
GenerateTable(nov_res);
GenerateTable(dec_res);

why is it so? I tried all other possibilities but to no use. Please suggest the possible wrong part that I am doing.

and this is my html:

> <html> <link rel="stylesheet" type="text/css" href="main.css"> <body>
> <div id="dvTable"> </div> <hr> <div id="febdvTable"> </div> <hr> <div
> id="mardvTable"> </div> <hr> <div id="aprdvTable"> </div> <hr> <div
> id="maydvTable"> </div> <hr> <div id="jundvTable"> </div> <hr> <div
> id="juldvTable"> </div> <hr> <div id="augdvTable"> </div> <hr> <div
> id="sepdvTable"> </div> <hr> <div id="octdvTable"> </div> <hr> <div
> id="novdvTable"> </div> <hr> <div id="decdvTable"> </div> <hr>
> 
> </body> <script src="main.js"></script> </html>

the faulty code lies in this part I guess :

    //dvTable.innerHTML = "";
    dvTable.appendChild(table);


  //Create and append select list
   var selectList = document.createElement("select");
   selectList.setAttribute("id", "mySelect");
   //dvTable.appendChild(selectList);

   for (var i = 0; i < array.length; i++) {
   var option = document.createElement("option");
   option.setAttribute("value", array[i]);
   option.text = array[i];
   selectList.appendChild(option);
   }

  //Add the data rows.
    for (var i = 0; i < param_days.length; i++) {

        var cell = row.insertCell();
        cell.appendChild(selectList);

        }



}

Answer 1

I didn't exactly find the mistake in your code, but the following bit hopefully helps.

    var getDays = function getDays( month, year ) {
            var days = [],
                limit = new Date(year, month, 0).getDate(),
                i;
            for (i = 1; i <= limit; i += 1) {
                days.push(new Date(year, (month - 1), i).toDateString());
            }
            return days;
        },
        getYearInDays = function getYearInDays( year ) {
            var years = [],
                i;
            for (i = 1; i <= 12; i += 1) {
                years.push(getDays(i, year));
            }
            return years;
        },
        generateTable = function generateTable( days, monthName ) {
            var tag = function tag(tagName) {
                    return document.createElement(tagName);
                },
                table = tag('table'),
                row,
                cell,
                select = tag('select'),
                option;
            // header
            row = tag('tr');
            cell = tag('th');
            cell.textContent = monthName;
            row.appendChild(cell);
            table.appendChild(row);
            row = tag('tr');
            cell = tag('td');
            // select
            days.forEach(function (day) {
                option = tag('option');
                option.setAttribute('value', day);
                option.textContent = day;
                select.appendChild(option);
            });
            cell.appendChild(select);
            row.appendChild(cell);
            table.appendChild(row);
            return table;
        },
        monthNames = ['January', 'february', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'],
        dayAry = getYearInDays('2016'),
        fragment = document.createDocumentFragment();
    dayAry.forEach(function (days, index) {
        var table = generateTable(days, monthNames[index]);
        fragment.appendChild(table);
    });
    document.querySelector('#dayTables').appendChild(fragment);

Answer 2

I think you are trying to append the same DOM element with one line code inside a loop

 cell.appendChild(selectList);

I would recommend create selectList inside the loop

for (var i = 0; i < param_days.length; i++) {

   var selectList = document.createElement("select");
   selectList.setAttribute("id", "mySelect"+i);

   for (var j = 0; j < array.length; j++) {
     var option = document.createElement("option");
     option.setAttribute("value", array[j]);
     option.text = array[j];
     selectList.appendChild(option);
   }
   var cell = row.insertCell();
   cell.appendChild(selectList);

}