Question

我想将输入字段添加到每个表列中，如下图所示。谁能给我一些关于如何循环进入每个表列的输入字段的建议？每一个帮助将不胜感激！以下是我的代码段，非常感谢任何回答！！！谢谢您的帮助！

function displayCalendar(){


    var htmlContent ="";
    var FebNumberOfDays ="";
    var counter = 1;
    var calCon = "";


    var dateNow = new Date();
    var month = dateNow.getMonth();

    var nextMonth = month+1;
    var prevMonth = month -1;
    var day = dateNow.getDate();
    var year = dateNow.getFullYear();


    if (month == 1){
    if ( (year%100!=0) && (year%4==0) || (year%400==0)){
    FebNumberOfDays = 29;
    }else{
    FebNumberOfDays = 28;
    }
    }


    var monthNames = ["January","February","March","April","May","June","July","August","September","October","November", "December"];
    var dayNames = ["Sunday","Monday","Tuesday","Wednesday","Thrusday","Friday", "Saturday"];
    var dayPerMonth = ["31", ""+FebNumberOfDays+"","31","30","31","30","31","31","30","31","30","31"]


    var nextDate = new Date(nextMonth +' 1 ,'+year);
    var weekdays= nextDate.getDay();
    var weekdays2 = weekdays
    var numOfDays = dayPerMonth[month];



    while (weekdays>0){
    htmlContent += "<td class='monthPre'></td>";


    weekdays--;
    }


    while (counter <= numOfDays){


    if (weekdays2 > 6){
    weekdays2 = 0;
    htmlContent += "</tr><tr>";
    }


    if (counter == day){
    htmlContent +="<td class='dayNow'  onMouseOver='this.style.background=\"#FF0000\"; this.style.color=\"#FFFFFF\"' "+
    "onMouseOut='this.style.background=\"#FFFFFF\"; this.style.color=\"#00FF00\"'>"+counter+"</td>";
    }else{
    htmlContent +="<td class='monthNow' onMouseOver='this.style.background=\"#FF0000\"'"+
    " onMouseOut='this.style.background=\"#FFFFFF\"'>"+counter+"</td>";    

    }

    weekdays2++;
    counter++;
    }



    // This Code Doesn't Work
    var calCon = "<div id='hide'>"
    +monthNames[month]+" "+ year +"";
    calCon +="<label>";
    calCon += "<input id='files' type='file' />";
    calCon += "<span class='fa fa-plus'></span>";
    calCon += "</label>";
    calCon += "<output class='img-responsive' id='result'/>";
    calCon += calCon;
    calCon += "</div>";

    document.getElementById("calendar").innerHTML=calCon;


    var calendarBody = "<table class='calendar'> <tr class='monthNow'>"
    +monthNames[month]+" "+ year +"</tr>";
    calendarBody +="<tr class='dayNames'><td>Sun</td><td>Mon</td><td>Tues</td>"+
    "<td>Wed</td><td>Thurs</td><td>Fri</td> <td>Sat</td> </tr>";
    calendarBody += "<tr>";
    calendarBody += htmlContent;
    calendarBody += "</tr></table>";

    document.getElementById("calendar").innerHTML=calendarBody;


    }

  .monthPre{
    color: gray;
    text-align: center;
    }


    td.monthNow {
    border: 1px solid black;
    color: blue;
    text-align: center;
    border: 1pxx solid black;
    height: 150px;
    width: 150px;
    }


    .dayNow{
    border: 2px solid black;
    color: #FF0000;
    text-align: center;
    }


    .calendar{
    width: 100%;
    }


    .monthNow th{
    background-color: #000000;
    color: #FFFFFF;
    text-align: center;

    }


    .dayNames {
    background: yellow;
    color: #000;
    text-align: center;
    height: 100px;
    width: 100px;

    }

 <html>
    <head> 
    <title>JavaScript calendar</title>

    </head> 

    <body onload="displayCalendar()"> 

    <div id="calendar"></div> 

    </body> 

    </html>

Answer 1

您快到了。您只需要移动此块：

calCon = "<div id='hide'>" +
  monthNames[month] + " " + year + "";
calCon += "<label>";
calCon += "<input id='files' type='file' />";
calCon += "<span class='fa fa-plus'></span>";
calCon += "</label>";
calCon += calCon;
calCon += "<output class='img-responsive' id='result'/>";

在while循环内并摆脱此行：

calCon += calCon;

之后，只需使用 calCon

更新 htmlContent 变量

if (counter == day) {
  htmlContent += "<td class='dayNow'  onMouseOver='this.style.background=\"#FF0000\"; this.style.color=\"#FFFFFF\"' " +
    "onMouseOut='this.style.background=\"#FFFFFF\"; this.style.color=\"#00FF00\"'>" + counter + "</td>";
} else {
  htmlContent += "<td class='monthNow' onMouseOver='this.style.background=\"#FF0000\"'" +
    " onMouseOut='this.style.background=\"#FFFFFF\"'>" + calCon + counter + "</td>";
}

这是完整的示例：

function displayCalendar() {


  var htmlContent = "";
  var FebNumberOfDays = "";
  var counter = 1;
  var calCon = "";


  var dateNow = new Date();
  var month = dateNow.getMonth();

  var nextMonth = month + 1;
  var prevMonth = month - 1;
  var day = dateNow.getDate();
  var year = dateNow.getFullYear();


  if (month == 1) {
    if ((year % 100 != 0) && (year % 4 == 0) || (year % 400 == 0)) {
      FebNumberOfDays = 29;
    } else {
      FebNumberOfDays = 28;
    }
  }


  var monthNames = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"];
  var dayNames = ["Sunday", "Monday", "Tuesday", "Wednesday", "Thrusday", "Friday", "Saturday"];
  var dayPerMonth = ["31", "" + FebNumberOfDays + "", "31", "30", "31", "30", "31", "31", "30", "31", "30", "31"]


  var nextDate = new Date(nextMonth + ' 1 ,' + year);
  var weekdays = nextDate.getDay();
  var weekdays2 = weekdays
  var numOfDays = dayPerMonth[month];



  while (weekdays > 0) {
    htmlContent += "<td class='monthPre'></td>";


    weekdays--;
  }


  while (counter <= numOfDays) {


    if (weekdays2 > 6) {
      weekdays2 = 0;
      htmlContent += "</tr><tr>";
    }
    calCon = "<div id='hide'>" +
      monthNames[month] + " " + year + "";
    calCon += "<label>";
    calCon += "<input id='files' type='file' />";
    calCon += "<span class='fa fa-plus'></span>";
    calCon += "</label>";
    calCon += "<output class='img-responsive' id='result'/>";

    calCon += "</div>";
    if (counter == day) {
      htmlContent += "<td class='dayNow'  onMouseOver='this.style.background=\"#FF0000\"; this.style.color=\"#FFFFFF\"' " +
        "onMouseOut='this.style.background=\"#FFFFFF\"; this.style.color=\"#00FF00\"'>" + counter + "</td>";
    } else {
      htmlContent += "<td class='monthNow' onMouseOver='this.style.background=\"#FF0000\"'" +
        " onMouseOut='this.style.background=\"#FFFFFF\"'>" + calCon + counter + "</td>";
    }

    weekdays2++;
    counter++;
  }



  // This Code Doesn't Work





  var calendarBody = "<table class='calendar'> <tr class='monthNow'>" +
    monthNames[month] + " " + year + "</tr>";
  calendarBody += "<tr class='dayNames'><td>Sun</td><td>Mon</td><td>Tues</td>" +
    "<td>Wed</td><td>Thurs</td><td>Fri</td> <td>Sat</td> </tr>";
  calendarBody += "<tr>";
  calendarBody += htmlContent;
  calendarBody += "</tr></table>";

  document.getElementById("calendar").innerHTML = calendarBody;


}

.monthPre {
  color: gray;
  text-align: center;
}

td.monthNow {
  border: 1px solid black;
  color: blue;
  text-align: center;
  border: 1pxx solid black;
  height: 150px;
  width: 150px;
}

.dayNow {
  border: 2px solid black;
  color: #FF0000;
  text-align: center;
}

.calendar {
  width: 100%;
}

.monthNow th {
  background-color: #000000;
  color: #FFFFFF;
  text-align: center;
}

.dayNames {
  background: yellow;
  color: #000;
  text-align: center;
  height: 100px;
  width: 100px;
}

<body onload="displayCalendar()">
  <div id="calendar"></div>
</body>

Answer 2

只需在您的javascript的htmlContent中添加<input type='file'/>

function displayCalendar(){


    var htmlContent ="";
    var FebNumberOfDays ="";
    var counter = 1;
    var calCon = "";


    var dateNow = new Date();
    var month = dateNow.getMonth();

    var nextMonth = month+1;
    var prevMonth = month -1;
    var day = dateNow.getDate();
    var year = dateNow.getFullYear();


    if (month == 1){
    if ( (year%100!=0) && (year%4==0) || (year%400==0)){
    FebNumberOfDays = 29;
    }else{
    FebNumberOfDays = 28;
    }
    }


    var monthNames = ["January","February","March","April","May","June","July","August","September","October","November", "December"];
    var dayNames = ["Sunday","Monday","Tuesday","Wednesday","Thrusday","Friday", "Saturday"];
    var dayPerMonth = ["31", ""+FebNumberOfDays+"","31","30","31","30","31","31","30","31","30","31"]


    var nextDate = new Date(nextMonth +' 1 ,'+year);
    var weekdays= nextDate.getDay();
    var weekdays2 = weekdays
    var numOfDays = dayPerMonth[month];



    while (weekdays>0){
    htmlContent += "<td class='monthPre'></td>";


    weekdays--;
    }


    while (counter <= numOfDays){


    if (weekdays2 > 6){
    weekdays2 = 0;
    htmlContent += "</tr><tr>";
    }


    if (counter == day){
    htmlContent +="<td class='dayNow'  onMouseOver='this.style.background=\"#FF0000\"; this.style.color=\"#FFFFFF\"' "+
    "onMouseOut='this.style.background=\"#FFFFFF\"; this.style.color=\"#00FF00\"'><input id='fileupload"+counter+"' type='file' />"+counter+"</td>";
    }else{
    htmlContent +="<td class='monthNow' onMouseOver='this.style.background=\"#FF0000\"'"+
    " onMouseOut='this.style.background=\"#FFFFFF\"'><input id='fileupload"+counter+"' type='file' />"+counter+"</td>";    

    }

    weekdays2++;
    counter++;
    }



    // This Code Doesn't Work
    var calCon = "<div id='hide'>"
    +monthNames[month]+" "+ year +"";
    calCon +="<label>";
    calCon += "<input id='files' type='file' />";
    calCon += "<span class='fa fa-plus'></span>";
    calCon += "</label>";
    calCon += "<output class='img-responsive' id='result'/>";
    calCon += calCon;
    calCon += "</div>";

    document.getElementById("calendar").innerHTML=calCon;


    var calendarBody = "<table class='calendar'> <tr class='monthNow'>"
    +monthNames[month]+" "+ year +"</tr>";
    calendarBody +="<tr class='dayNames'><td>Sun</td><td>Mon</td><td>Tues</td>"+
    "<td>Wed</td><td>Thurs</td><td>Fri</td> <td>Sat</td> </tr>";
    calendarBody += "<tr>";
    calendarBody += htmlContent;
    calendarBody += "</tr></table>";

    document.getElementById("calendar").innerHTML=calendarBody;


    }

.monthPre{
    color: gray;
    text-align: center;
    }


    td.monthNow {
    border: 1px solid black;
    color: blue;
    text-align: center;
    border: 1pxx solid black;
    height: 150px;
    width: 150px;
    }


    .dayNow{
    border: 2px solid black;
    color: #FF0000;
    text-align: center;
    }


    .calendar{
    width: 100%;
    }


    .monthNow th{
    background-color: #000000;
    color: #FFFFFF;
    text-align: center;

    }


    .dayNames {
    background: yellow;
    color: #000;
    text-align: center;
    height: 100px;
    width: 100px;

    }

<html>
    <head> 
    <title>JavaScript calendar</title>

    </head> 

    <body onload="displayCalendar()"> 

    <div id="calendar"></div> 

    </body> 

    </html>

使用JavaScript将输入字段循环到每个表列中

2 个答案: