Как я могу подойти к тому, чтобы каждый час создавал столбец, отличающийся от 9 до 17 часов?

Question

У меня сейчас только 9:00 в каждом столбце для просмотра.

for (let i = 0; i < 8; i++) {
  var row = $('<div class="row">');
  var col1 = $('<div class="col-md-2"><p class="hour">9:00AM</p>');
  var col2 = $(`<div class="col-md-8"><textarea id=text${i} class="description" placeholder="Add your event here..."></textarea>`);        
  var col3 = $(`<div class="col-md-2"><button class="saveBtn" id=${i}><i class="fas fa-save"></i></button>`)

  row.append(col1);
  row.append(col2);
  row.append(col3);

  $(".container").append(row);
}

Answer 1

Вы можете выполнить итерацию с 9 - 17, а затем преобразовать ее в формат AM / PM из этой записи

for (let i = 9; i <= 17; i++) {
  var row = $('<div class="row">');
  var col1 = $('<div class="col-md-2"><p class="hour">' + formatAMPM(i) + '</p>');
  var col2 = $(`<div class="col-md-8"><textarea id=text${i} class="description" placeholder="Add your event here..."></textarea>`);
  var col3 = $(`<div class="col-md-2"><button class="saveBtn" id=${i}><i class="fas fa-save"></i></button>`)

  row.append(col1);
  row.append(col2);
  row.append(col3);

  $(".container").append(row);
}

function formatAMPM(hours) {
  var ampm = hours >= 12 ? 'pm' : 'am';
  hours = hours % 12;
  hours = hours ? hours : 12;
  return hours + ':00 ' + ampm;
}

<script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>

<div class="container"></div>