动态创建元素答案

【问题标题】：create th element dynamicly动态创建元素
【发布时间】：2020-06-15 09:22:09
【问题描述】：

您好，我想知道如何根据来自两个日期选择器输入值的日期期间或天数动态增加表列，并将日期作为列的标题。我用它来过滤数据库中的数据以建立考勤样本。以下是创建表格标题单元格但使用按钮的代码

 <!DOCTYPE html>
<html>
<head>
<style>
table, th {
  border: 1px solid black;
}
</style>
</head>
<body>

<table id="myTable">
  <tr id="myTr">
  </tr>
</table>

<p>Click the button to create a TH element.</p>

<button onclick="myFunction()">Try it</button>

<script>
function myFunction() {
  var x = document.createElement("TH");
  var t = document.createTextNode("table header cell");
  x.appendChild(t);
  document.getElementById("myTr").appendChild(x);
}
</script>

</body>
</html>

以及下面的代码我如何获得 2 个日期选择器值，但不知道如何计算这些值之间的时间段以及如何将其作为列增加的逻辑注入

<!DOCTYPE html>
<html>
<body>

<h3>A demonstration of how to access a Date field</h3>

<input type="date" id="startdate" value="2014-02-09">
<br>
<input type="date" id="enddate" value="2014-02-09">

<p>Click the button to get the date of the date field.</p>

<button onclick="myFunction()">Try it</button>

<p><strong>Note:</strong> input elements with type="date" do not show as any date field/calendar in IE 11 and earlier versions.</p>

<p id="demo"></p>
<br>
<p id="demo1"></p>

<script>
function myFunction() {
  var x = document.getElementById("startdate").value;
  document.getElementById("demo").innerHTML = x;
  var x = document.getElementById("enddate").value;
  document.getElementById("demo1").innerHTML = x;

}
</script>

</body>
</html>

谢谢你的提前

【问题讨论】：

标签： html laravel eloquent

【解决方案1】：

使用moment.js 可以轻松处理日期，getDates 是一个函数，用于返回包含输入之间日期的数组。

function myFunction() {
  var startDate = document.getElementById("startdate").value;
  var endDate = document.getElementById("enddate").value;


  var dates = getDates(startDate, endDate);

  var thead = document.querySelector('#myTable thead');
  thead.innerHTML = ''

  for (const date of dates) {
    var x = document.createElement("th");
    var t = document.createTextNode(date);
    x.appendChild(t);
    thead.appendChild(x);
  }
}

function getDates(startDate, endDate) {
  var dateArray = [];
  var currentDate = moment(startDate);
  var stopDate = moment(endDate);
  while (currentDate <= stopDate) {
    dateArray.push(moment(currentDate).format('YYYY-MM-DD'))
    currentDate = moment(currentDate).add(1, 'days');
  }
  return dateArray;
}

table,
th {
  border: 1px solid black;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.24.0/moment.min.js"></script>
<input type="date" id="startdate" value="2019-02-09">
<br>
<input type="date" id="enddate" value="2019-02-09">
<p>Click the button to get the date of the date field.</p>

<button onclick="myFunction()">Try it</button>

<table id="myTable">
  <thead>
  </thead>
</table>

【讨论】：

谢谢@Hans C. Felix Ramos 正是我与 laravel 合作构建考勤系统，通过上面的问题，我想从时间戳字段中获取数据并将其显示在标题下方的单元格表中标题中的日期您想建议我如何处理这个想法。到目前为止，我已经建立了这个概念，但只有一列来显示不同日期的时间戳。简而言之，我想过滤多个用户的呈现状态，并根据列标题的日期显示在单元格中。提前谢谢你