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

标签 javascript html css

我想将输入字段添加到每个表格列中，如下图所示。你们中的任何人都可以给我一些关于如何循环进入每个表列的输入字段的建议吗？ 每一个帮助将不胜感激! 下面是我的代码片段，任何答案都非常感谢!!!感谢您的所有帮助!

enter image description here 

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>

最佳答案

你快到了。你只需要移动这个 block :

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>

关于javascript - 使用 JavaScript 将输入字段循环到每个表列中，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/56492320/

上一篇：html - 关于正确使用 Grid 或 Table 的问题。 HTML/CSS 最佳实践问题

下一篇：html - 如何在旋转图像上叠加

相关文章：

javascript - 如何让日历中所有过去的日期都不可选择？

javascript - 加上删除字符串的其他部分并只保留匹配

javascript - 如何使用jQuery/JavaScript实现轮播效果

JavaScript 编译器在 Visual Studio 中到处都需要 '===' 而不是 '=='

javascript - 如何 href 到特定组件以对某些操作使用react

javascript检查并替换两个字符串

css - 我的 Html 文件没有显示任何样式

javascript - 根据 iframe 的内容动态调整其大小

php - 使用 PHP 将 HTML 表单数据转换为 PDF 文件

CSS 标题样式不适用于子项

©2024 IT工具网  联系我们