Вставка блока выбора в ячейку таблицы в html через Javascript

Question

Я пытаюсь создать сетку вида листа с использованием таблицы Javascript, но selectbox не отображается во всех ячейках, а только в последней ячейке. Зачем? Вот мой рабочий код:

/** 
    * @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); 

почему это так? Я пробовал все другие возможности, но не использовал. Пожалуйста, предложите возможную неправильную часть, которую я делаю.

и это мой 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> 

неисправный код находится в этой части я думаю:

//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

Я думаю, что вы пытаетесь добавить в же DOM элемент с одной строки кода внутри цикла

cell.appendChild(selectList); 

Я бы рекомендовал создать SelectList внутри цикла

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); 

} 

Answer 2

Я не точно найти ошибку в коде, но следующий бит надеюсь, поможет.

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);