Javascript 自动创建按钮并将其制作成手风琴

我有一个函数，它创建一个结束于哪个月的按钮。如果是二月，那么是28个按钮，三月，然后是31个按钮，依此类推。然后我有一个创建手风琴的函数。但是，我的问题是，我无法将两者连接起来。我希望javascript创建的按钮可以像手风琴一样工作。不太清楚怎么做。因此，我的问题是，如何将我的手风琴功能用于根据月份创建的按钮？
下面的代码段和按钮的JSFIDLE：

var showDate = new Date();
var months = ["Januari", "Februari", "March", "April", "May", "June",
              "July", "Augusti", "September", "October", "November", "December"];
var weeks = ["Sunday","Monday","Tuseday","Wednesday","Thursday","Friday","Saturday"];



function drawTable(forDate) {
    var daysInMonth = new Date(forDate.getFullYear(),forDate.getMonth()+1,0).getDate();
    var cellsToDraw = daysInMonth;
    var newdate = forDate.getFullYear() +"-"+ ("0"+ (forDate.getMonth() + 1)).slice(-2);
    var table = document.getElementById("table");
    table.innerHTML = "";
    for (var r = 0; r < (daysInMonth / 7); r++) {
        var newRow = document.createElement("tr");
        table.appendChild(newRow);
        for (var c = 0; c < 31 && cellsToDraw > 0; c++) {
            var day1 = ("0" + (c + 1)).slice(-2);
            var textarea = document.createElement('button')
            textarea.setAttribute("placeholder", day1 );
            textarea.setAttribute("class", "row");
            //textarea.setAttribute("id", some_value);
            newRow.appendChild(textarea);
            textarea.setAttribute("name", "day");
            textarea.setAttribute("day",  newdate + "-" + day1 );
            textarea.innerHTML = newdate + "-" + day1;
            cellsToDraw--;
        }
    }
}

window.onload = function() {
    document.getElementById("displayingMonth").innerHTML = months[showDate.getMonth()];
    drawTable(showDate );
};

function next() {
    if (showDate.getMonth() == 11) {
        showDate.setMonth( 0 );
        showDate.setFullYear( showDate.getFullYear()+1 );
    } else {
        showDate.setMonth( showDate.getMonth()+1 );
    }
    document.getElementById("displayingMonth").innerHTML = months[showDate.getMonth()];
    drawTable( showDate );
}
  function daysInMonth(month, year) {
         var days;
         switch (month) {
           case 1: // Feb, our problem child
           var leapYear = ((year % 4 == 0) && (year % 100 != 0)) || (year % 400 == 0);
           days = leapYear ? 29 : 28;
           break;
           case 3:
           case 5:
           case 8:
           case 10:
           days = 30;
           break;
           default:
           days = 31;
          }
          return days;
        }

      <h1 id="displayingMonth"></h1>
  <table id="table" cellspacing="0" cellpadding="0"   border-collapse="collapse";>

按钮的函数和html：

var showDate = new Date();
var months = ["Januari", "Februari", "March", "April", "May", "June",
              "July", "Augusti", "September", "October", "November", "December"];
var weeks = ["Sunday","Monday","Tuseday","Wednesday","Thursday","Friday","Saturday"];



function drawTable(forDate) {
    var daysInMonth = new Date(forDate.getFullYear(),forDate.getMonth()+1,0).getDate();
    var cellsToDraw = daysInMonth;
    var newdate = forDate.getFullYear() +"-"+ ("0"+ (forDate.getMonth() + 1)).slice(-2);
    var table = document.getElementById("table");
    table.innerHTML = "";
    for (var r = 0; r < (daysInMonth / 7); r++) {
        var newRow = document.createElement("tr");
        table.appendChild(newRow);
        for (var c = 0; c < 31 && cellsToDraw > 0; c++) {
            var day1 = ("0" + (c + 1)).slice(-2);
            var textarea = document.createElement('button')
            textarea.setAttribute("placeholder", day1 );
            textarea.setAttribute("class", "row");
            //textarea.setAttribute("id", some_value);
            newRow.appendChild(textarea);
            textarea.setAttribute("name", "day");
            textarea.setAttribute("day",  newdate + "-" + day1 );
            textarea.innerHTML = newdate + "-" + day1;
            cellsToDraw--;
        }
    }
}

window.onload = function() {
    document.getElementById("displayingMonth").innerHTML = months[showDate.getMonth()];
    drawTable(showDate );
};

function next() {
    if (showDate.getMonth() == 11) {
        showDate.setMonth( 0 );
        showDate.setFullYear( showDate.getFullYear()+1 );
    } else {
        showDate.setMonth( showDate.getMonth()+1 );
    }
    document.getElementById("displayingMonth").innerHTML = months[showDate.getMonth()];
    drawTable( showDate );
}
  function daysInMonth(month, year) {
         var days;
         switch (month) {
           case 1: // Feb, our problem child
           var leapYear = ((year % 4 == 0) && (year % 100 != 0)) || (year % 400 == 0);
           days = leapYear ? 29 : 28;
           break;
           case 3:
           case 5:
           case 8:
           case 10:
           days = 30;
           break;
           default:
           days = 31;
          }
          return days;
        }

      <h1 id="displayingMonth"></h1>
  <table id="table" cellspacing="0" cellpadding="0"   border-collapse="collapse";>

1
1内容

2.
2内容

3.
3

我不确定我是否完全理解您希望在页面上直观地看到什么-我尝试将您的代码放在JSFIDLE中，但没有看到根据月份创建的任何按钮，它似乎缺少一些代码

但是-如果你想让你的手风琴功能像为一个月的每一天创建的按钮一样有用，那么它们需要与你当前使用手风琴功能的其他按钮具有相同的结构。他们需要类名“row”，因为这就是进行手风琴工作的事件侦听器的连接方式。由于您的函数调用this.nextElementSibling，因此每个按钮还需要一个同级元素

更新：

谢谢你的小提琴

因此，在您要创建按钮并在其上设置属性的代码中，您不想创建“panel”元素，当您单击日期按钮时，该元素将向上或向下折叠吗？我认为将“textarea”重命名为“button”并创建一个单独的textarea元素更有意义：

var button = document.createElement("button");
var textarea = document.createElement("div");
textarea.setAttribute("class", "panel");
newRow.appendChild(textarea);

然后，您可以向修改“面板”的按钮添加事件侦听器。这对我来说并不是100%有效，但请尝试一下：

button.addEventListener("click", function() {
    var panel = this.nextElementSibling;
    if (panel.style.maxHeight) {
      panel.style.maxHeight = null;
    } else {
      panel.style.maxHeight = "50px";
    }
});

在css中，我添加了高度：100px到

面板{}

块。 不过，您仍然需要弄清楚如何在日期下获得黄色块。我希望这有帮助

另一更新： 如果将按钮和textarea放入父div中，它们会一个接一个地排列，尽管这并不意味着每个按钮都会一个接一个地排列：

var button = document.createElement("button");
var textarea = document.createElement("div");
var container = document.createElement("div");
button.setAttribute("placeholder", day1 );
button.setAttribute("class", "row");
textarea.setAttribute("class", "panel");
container.setAttribute("class", "container");

newRow.appendChild(container);
container.appendChild(button);
container.appendChild(textarea);

作为旁注，我认为通过查看代码，您试图创建一个表，其中表中的每一行表示一周。现在，你所有的按钮都在第一行。如果您查看表格，可以看到这一点。要修复它，您需要将这里的计数器更改为小于7，而不是31:

for（var c=0；c<7&&cellsToDraw>0；c++）{

---

当你使用它时，你可能想考虑从表中切换并在div中重新创建它。通常，如果我们使用表，我们也使用<代码> <代码> s，但是我不确定在这里会起作用，因为你想把文本放在每个代码> TD 。合并了功能并做了一些小的调整。这就是你的意思吗

<!doctype html>
  <html>
    <head>
      <style>
        .row { color: grey;  width: 13%;  transition: 0.4s;  margin: 0 auto;}
        .panel { max-height: 0; transition: max-height 0.2s ease-out; overflow: hidden;  width: 100px;  float: left;  background-color: yellow; display: inherit;}
      </style>
    </head>
    <body>
      <h1 id="displayingMonth"></h1>
      <button id="btn" type="button" name="btnPrev" onclick="prev();">&lt; Prev</button>
      <button id="btn" type="button" name="btnNext" onclick="javascript:next();"> Next &gt;</button>
      <table id="table" cellspacing="0" cellpadding="0"   border-collapse="collapse"></table>
      <script>
        var showDate = new Date();
        var months = ["Januari", "Februari", "March", "April", "May", "June","July", "Augusti", "September", "October", "November", "December"];
  var weeks = ["Sunday","Monday","Tuseday","Wednesday","Thursday","Friday","Saturday"];
        var theForm =
  '<form><fieldset><legend>Note For today</legend><input type="text" placeholder="enter something"/></fieldset><input type="submit" value="submit"/></form>'
        function drawTable(forDate) {
          var daysInMonth = new Date(forDate.getFullYear(),forDate.getMonth()+1,0).getDate();
          var cellsToDraw = daysInMonth;
          var newdate = forDate.getFullYear() +"-"+ ("0"+ (forDate.getMonth() + 1)).slice(-2);
          var table = document.getElementById("table");
          table.innerHTML = "";
          for (var r = 0; r < (daysInMonth / 7); r++) {
            var newRow = document.createElement("tr");
            table.appendChild(newRow);
            for (var c = 0; c < 31 && cellsToDraw > 0; c++) {
              var day1 = ("0" + (c + 1)).slice(-2);
              var textarea = document.createElement("button");
              textarea.setAttribute("placeholder", day1 );
              textarea.setAttribute("class", "row");
              newRow.appendChild(textarea);
              textarea.setAttribute("name", "day");
              textarea.setAttribute("day",  newdate + "-" + day1 );
              textarea.innerHTML = newdate + "-" + day1;
              var textarea1 = document.createElement("div");
              textarea1.setAttribute("class", "panel");
              newRow.appendChild(textarea1);
              textarea1.innerHTML = theForm;
              cellsToDraw--;
            }
          }
          var acc = document.getElementsByClassName("row");
          var i;
          for (i = 0; i < acc.length; i++) {
            acc[i].addEventListener("click", function() {
            var panel = this.nextElementSibling;
            var active = checkIfAnyVisible();
            if (active) {
              active.className = 'panel';
              active.style.maxHeight = null;
            }
            if (panel.style.maxHeight){
              panel.style.maxHeight = null;
              panel.className = 'panel';
            } else if (!checkIfAnyVisible()) {
            panel.style.maxHeight = panel.scrollHeight + "px";
            panel.style.width = "100%";
            panel.className = 'panel active';
            }
          });
        }
        function checkIfAnyVisible() {
          for (var i=0; i<acc.length; i++) {
            if (acc[i].nextElementSibling.className.includes('active')) {
              return acc[i].nextElementSibling;
            } else {
              continue;
            }
          }
          return false;
        }
      }
      window.onload = function() {
        document.getElementById("displayingMonth").innerHTML = months[showDate.getMonth()];
        drawTable(showDate);
      };
      function next() {
        if (showDate.getMonth() == 11) {
          showDate.setMonth( 0 );
          showDate.setFullYear( showDate.getFullYear()+1 );
        } else { showDate.setMonth( showDate.getMonth()+1 ); }
          document.getElementById("displayingMonth").innerHTML = months[showDate.getMonth()];
          drawTable( showDate );
        }
        function prev() {
          if (showDate.getMonth() === 0) {
            showDate.setMonth( 11 );
            showDate.setFullYear( showDate.getFullYear()-1 );
          } else { showDate.setMonth( showDate.getMonth()-1 );}
          document.getElementById("displayingMonth").innerHTML = months[showDate.getMonth()];
          drawTable( showDate );
        }
        function daysInMonth(month, year) {
          var days;
          switch (month) {
            case 1: // Feb, our problem child
            var leapYear = ((year % 4 == 0) && (year % 100 != 0)) || (year % 400 == 0);
            days = leapYear ? 29 : 28;
            break;
            case 3:
            case 5:
            case 8:
            case 10:
            days = 30;
            break;
            default:
            days = 31;
          }
          return days;
        }
      </script>
    </body>
  </html>

.行{颜色：灰色；宽度：13%；过渡：0.4s；边距：0自动；}
.panel{max height:0；transition:max height 0.2s ease out；overflow:hidden；width:100px；float:left；背景色：黄色；display:inherit；}
上
下一个
var showDate=新日期（）；
var月数=[“一月”、“二月”、“三月”、“四月”、“五月”、“六月”、“七月”、“八月”、“九月”、“十月”、“十一月”、“十二月”]；
var weeks=[“星期日”、“星期一”、“星期四”、“星期三”、“星期四”、“星期五”、“星期六”]；
变型=
“今天的注意事项”
功能绘图台（forDate）{
var daysInMonth=新日期（forDate.getFullYear（），forDate.getMonth（）+1,0）.getDate（）；
var cellsToDraw=月日；
var newdate=forDate.getFullYear（）+“-”+（“0+（forDate.getMonth（）+1））.slice（-2）；
var table=document.getElementById（“表格”）；
table.innerHTML=“”；
对于（var r=0；r<（daysInMonth/7）；r++）{
var newRow=document.createElement（“tr”）；
表2.appendChild（纽罗）；
对于（var c=0；c<31&&cellsToDraw>0；c++）{
var day1=（“0”+（c+1））.slice（-2）；
var textarea=document.createElement（“按钮”）；
setAttribute（“占位符”，第1天）；
setAttribute（“类”、“行”）；
newRow.appendChild（textarea）；
setAttribute（“名称”、“日期”）；
setAttribute（“day”，newdate+“-”+day1）；
textarea.innerHTML=newdate+“-”+day1；
var textarea1=document.createElement（“div”）；
textarea1.setAttribute（“类”、“面板”）；
newRow.appendChild（textarea1）；
textarea1.innerHTML=表单；
cellsToDraw--；
}
}
var acc=document.getElementsByClassName（“行”）；
var i；
对于（i=0；i对于（var i=0；iHi，所有的代码都在那里，当我尝试它时，一切都正常。因此，我希望创建的按钮可以像手风琴一样工作。因此，当您单击按钮时，上下文