Question

我有这个基本的手风琴，但我想在其中添加一个html表格。因此，当您打开手风琴时，表格将在其中。我可以将它作为变量，但我希望在body标签内部使用HTML表单。不确定如何做到这一点。

功能：

    var showDate = new Date();
      var year = showDate.getFullYear();
      var months = ["Januari", "Februari", "March", "April", "May", "June","July", "Augusti", "September", "October", "November", "December"];
      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);
        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("class", "row");
            newRow.appendChild(textarea);
            textarea.innerHTML = day1;
            var textarea1 = document.createElement("div");
            textarea1.setAttribute("class", "panel");
            newRow.appendChild(textarea1);
            textarea1.innerHTML = "the HTML form should be here, inside of the accordion";
            cellsToDraw--;
          }
        }
        var acc = document.getElementsByClassName("row");
        var i;
        for (i = 0; i < acc.length; i++) {
          acc[i].addEventListener("click", function() {
          var panel = this.nextElementSibling;
          if (panel.style.maxHeight) {
            panel.style.maxHeight = null;
            panel.style.width = "0";
          } else {
          panel.style.maxHeight = panel.scrollHeight + "px";
          panel.style.width = "100%";
        }
      });
    }
  }

HTML：

  <h1 id="displayingMonth"></h1>
    <table id="table" cellspacing="0" cellpadding="0"   border-collapse="collapse"></table>
    <form id="form" action="insert.php" method="post">
      <input type="text" name="message" value="" placeholder="Message">
      <br>
       <input  type="submit" name="" value="Send">
     </form>

所有帮助都是适当的！ :)

Answer 1

首先将您想要的HTML放在隐藏的div中，并将其用作innerHTML。然后忘记宽度和高度来控制手风琴并直接使用显示。试试这个：

＆＃13;

var showDate = new Date();
var year = showDate.getFullYear();
var months = ["Januari", "Februari", "March", "April", "May", "June","July", "Augusti", "September", "October", "November", "December"];

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);
    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("class", "row");
            newRow.appendChild(textarea);
            textarea.innerHTML = day1;
            var textarea1 = document.createElement("div");
            textarea1.setAttribute("class", "panel");
            textarea1.setAttribute("style", "display: none");
            newRow.appendChild(textarea1);
            textarea1.innerHTML = document.getElementById('form').innerHTML;
            cellsToDraw--;
        }
    }
    var acc = document.getElementsByClassName("row");
    var i;
    for (i = 0; i < acc.length; i++) {
        acc[i].addEventListener("click", function() {
          var panel = this.nextElementSibling;
          if (panel.style.display == 'block') {
              panel.style.display = 'none';
          } else {
              panel.style.display = 'block';
          }
       });
    }
}
drawTable(showDate);

＆＃13;

<h1 id="displayingMonth"></h1>
<table id="table" cellspacing="0" cellpadding="0"   border-collapse="collapse"></table>
<div style='display: none'>
<form id="form" action="insert.php" method="post">
    <input type="text" name="message" value="" placeholder="Message">
    <br>
    <input  type="submit" name="" value="Send">
</form>
</div>

＆＃13;

现在你应该用css设计整个风格，使其更具代表性。我想你可以从这里继续前进。

修改

在想到你想要的东西后，我发现了一个简单的方法。请检查编辑的答案。但是为了将HTML与javascript分开，最好使用模板框架。我使用并推荐Nunjucks（https://mozilla.github.io/nunjucks/），但有很多。您也可以使用Require.js作为文件并将其包含在内。

如何在手风琴中添加HTML表单

1 个答案: