Форум

iAlexandeR · #1 (**permalink**) 24.12.2015, 09:51

Добрый день. Существует таблица "Время уроков", состоящая из 3-х столбцов (Начало, Конец, Перемена). Нужно с помощью js изменить значение элементов формы расположенных в ячейках таблицы, таким образом, чтобы время в первой ячейке было равным "08:00", во 2-ой ячейке +40 минут от первой, первая ячейка второй строки зависит от времени окончания урока + перемены и так для каждой строчки. Подтолкните, пожалуйста, в нужное направление.

Таблица:

<table id="tableTime">
            <tr><th>Начало</th><th>Конец</th><th>Перемена</th></tr>
            <tr><td><input class="beginTime" type="time"></td><td><input class="endTime" type="time"></td><td><input class="exchange" type="number" min="5" max="20" step="5" value="5"></td></tr>
            <tr><td><input class="beginTime" type="time"></td><td><input class="endTime" type="time"></td><td><input class="exchange" type="number" min="5" max="20" step="5" value="5"></td></tr>
            <tr><td><input class="beginTime" type="time"></td><td><input class="endTime" type="time"></td><td><input class="exchange" type="number" min="5" max="20" step="5" value="5"></td></tr>
            <tr><td><input class="beginTime" type="time"></td><td><input class="endTime" type="time"></td><td><input class="exchange" type="number" min="5" max="20" step="5" value="5"></td></tr>
            <tr><td><input class="beginTime" type="time"></td><td><input class="endTime" type="time"></td><td><input class="exchange" type="number" min="5" max="20" step="5" value="5"></td></tr>
</table>

рони · #2 (**permalink**) 24.12.2015, 10:56

iAlexandeR,

<!DOCTYPE HTML>

<html>

<head>
  <title>Untitled</title>
  <meta charset="utf-8">
</head>

<body>
<table id="tableTime">
            <tr><th>Начало</th><th>Конец</th><th>Перемена</th></tr>
            <tr><td><input class="beginTime" type="time"></td><td><input class="endTime" type="time"></td><td><input class="exchange" type="number" min="5" max="20" step="5" value="5"></td></tr>
            <tr><td><input class="beginTime" type="time"></td><td><input class="endTime" type="time"></td><td><input class="exchange" type="number" min="5" max="20" step="5" value="5"></td></tr>
            <tr><td><input class="beginTime" type="time"></td><td><input class="endTime" type="time"></td><td><input class="exchange" type="number" min="5" max="20" step="5" value="5"></td></tr>
            <tr><td><input class="beginTime" type="time"></td><td><input class="endTime" type="time"></td><td><input class="exchange" type="number" min="5" max="20" step="5" value="5"></td></tr>
            <tr><td><input class="beginTime" type="time"></td><td><input class="endTime" type="time"></td><td><input class="exchange" type="number" min="5" max="20" step="5" value="5"></td></tr>
</table>
<script>

window.addEventListener('DOMContentLoaded', function() {
var beginTime = document.querySelectorAll('.beginTime'),
    endTime = document.querySelectorAll('.endTime'),
    exchange = document.querySelectorAll('.exchange');
function formatTime(time)
{
  return  time.toTimeString().replace(/(\d\d:\d\d).*/,'$1')
}
function fn()
{  var time = new Date;
   time.setHours(8,0,0,0);
  [].forEach.call( beginTime, function(el,i) {
         el.value = formatTime(time);
         time.setMinutes(time.getMinutes()+40)
         endTime[i].value = formatTime(time);
         var ex = +exchange[i].value||5;
         time.setMinutes(time.getMinutes()+ex)
  });
}
fn();
[].forEach.call(exchange, function(item) {
        item.addEventListener('input', function() {
var num = +this.value;
num && num >=5 && num <= 20 &&  fn()
});
    });
 });
</script>
</body>

</html>

Форум

Справочник

Discord чат

Курсы javascript