динамически создать элемент - PullRequest
Новая
       0

динамически создать элемент

1 голос
/ 03 марта 2020

Привет, я хочу знать, как построить столбец таблицы, динамически увеличивающийся на основе числа периода или дней даты, которые получены из входного значения двух средств выбора даты и помещают дату в качестве заголовка столбца. Я использую это для фильтрации данных из базы данных для построения образца посещаемости. ниже приведен код для создания ячейки заголовка таблицы с использованием кнопки 

 <!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 выбора даты, но не знаю, как рассчитать период между этими значениями и как ввести его как logi c в каком столбце увеличилось 

<!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>

спасибо за продвижение

1 Ответ

0 голосов
/ 03 марта 2020

Используйте момент. 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>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...