4

Господа, прошу помощи, ибо никак не могу организовать логику скрипта, который находил бы нужные объекты и вставлял их в разметку. Подробности ниже.

Есть таблица календаря, которая генерится а js, есть массив объектов, каждый объект хранит в себе информацию о годе+месяце (year), дне месяца (day), событии (event), остальные параметры не так важны. Нужен скрипт, который будет пробегать по массиву, сверять месяц+год календаря с месяцем+годом в объектах, если все совпадает, то далее пробегать по таблице и сверять день календаря с днями в объектах, если совпадает, то в ячейку с совпадающей датой добавлять div с event, хранящимся в объекте.

Сейчас происходит почти то что нужно, НО если в массиве есть несколько объектов с совпадающими day объекта и днем календаря, то в ячейку с датой добавляется ТОЛЬКО первый объект, остальные игнорируются.

Вот так это выглядит сейчас:

let arr = [{
    dateEvent: "Первый тест",
    day: "11",
    description: "Первый тест",
    event: "Первый тест",
    names: "Первый тест",
    year: "Октябрь 2017"
  },
  {
    dateEvent: "Второй тест",
    day: "11",
    description: "Первый тест",
    event: "Первый тест",
    names: "Первый тест",
    year: "Октябрь 2017"
  },
  {
    dateEvent: "Третий тест",
    day: "11",
    description: "Первый тест",
    event: "Первый тест",
    names: "Первый тест",
    year: "Октябрь 2017"
  },
  {
    dateEvent: "Четвертый тест",
    day: "10",
    description: "Первый тест",
    event: "Первый тест",
    names: "Первый тест",
    year: "Октябрь 2017"
  },

]

const showAllEvents = () => {

  let arrEvents = arr,
    list = document.getElementById("organizer").getElementsByTagName('td');

  //берем первый день - внешний цикл
  for (let j = 0; j < list.length; j++) {

    //первый объект в массиве - внутренний цикл
    for (let i = 0; i < arrEvents.length; i++) {


      //проверяем соответсвие месяца и года с данными в объекте
      if (document.getElementById('year').innerHTML === arrEvents[i].year) {

        //проверяем день календаря и день объекта
        if (list[j].innerHTML === arrEvents[i].day) {

          //тут слайсится Событие
          let text = arrEvents[i].event,
            slicedEvent = text.slice(0, 15);

          if (slicedEvent.length < text.length) {

            slicedEvent += '...';
          }

          //создаем див, в него вставляем дивы с данными, которые должны хранится в ячейке
          let appendDiv = document.createElement('div');
          appendDiv.className = 'event-div';

          appendDiv.innerHTML = `
                    <div class="event">` + slicedEvent + `</div>
                    <div class="day-event" style="display: none">` + arrEvents[i].day + `</div>
                    <div class="year-event" style="display: none">` + arrEvents[i].year + `</div>
                    <div class="date-event" style="display: none">` + arrEvents[i].dateEvent + `</div>
                    <div class="names-event" style="display: none">` + arrEvents[i].names + `</div>
                    <div class="description-event" style="display: none">` + arrEvents[i].description + `</div>
                    `;

          //вставляем этот див в текущую ячейку
          document.getElementsByTagName('td')[j].appendChild(appendDiv);

        }

        //как я понимаю, внутренний цикл должен повториться и перейти ко второму объекту, 
        //но почему-то вместо этого сразу начинается новая итерация внешнего цикла
      }

    }

  }

};

showAllEvents();
body {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  position: relative;
  z-index: 333;
}

#calendar {
  width: 80%;
  height: 90%;
  margin: 0 auto;
}

#control-month span:first-child,
#control-month span:last-child {
  cursor: pointer;
}

#control-month div {
  cursor: pointer;
}

#organizer {
  border-collapse: collapse;
  width: 100%;
  font-family: monospace;
  line-height: 1.2em;
  font-size: 15px;
  text-align: center;
  word-break: break-all;
  table-layout: fixed;
}

#organizer thead {
  color: rgb(50, 50, 50);
  font-size: 10px;
}

#organizer tbody tr {
  height: 80px;
}

#organizer tbody td {
  position: relative;
  color: rgb(44, 86, 122);
  font-size: 10px;
  vertical-align: top;
  cursor: pointer;
  border: 1px solid dimgrey;
  z-index: 33;
}

#organizer tbody td:nth-child(n+6),
#organizer .holiday {
  color: rgb(231, 140, 92);
}

#organizer tbody td.today {
  background: rgb(220, 0, 0);
  color: #fff;
}

#cover-div {
  width: 15%;
  height: 25%;
  position: absolute;
  background: lightsteelblue;
  border: 1px solid darkgray;
}

#cover-div input,
#cover-div textarea {
  box-sizing: border-box;
}

#overlay-div {
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  position: fixed;
}
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <link rel="stylesheet" href="style.css">
</head>

<body>

  <section id="calendar">

    <div id="control-month">
      <span>‹</span>
      <span id="year">Октябрь 2017</span>
      <span>›</span>
      <div>Сегодня</div>
    </div>

    <table id="organizer">
      <tbody>
        <tr>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td data-container="container-event">1</td>
        </tr>
        <tr>
          <td data-container="container-event">2</td>
          <td data-container="container-event">3</td>
          <td data-container="container-event">4</td>
          <td data-container="container-event">5</td>
          <td data-container="container-event">6</td>
          <td data-container="container-event">7</td>
          <td data-container="container-event">8</td>
        </tr>
        <tr>
          <td data-container="container-event">9</td>
          <td data-container="container-event">10</td>
          <td class="today" data-container="container-event">11</td>
          <td data-container="container-event">12</td>
          <td data-container="container-event">13</td>
          <td data-container="container-event">14</td>
          <td data-container="container-event">15</td>
        </tr>
        <tr>
          <td data-container="container-event">16</td>
          <td data-container="container-event">17</td>
          <td data-container="container-event">18</td>
          <td data-container="container-event">19</td>
          <td data-container="container-event">20</td>
          <td data-container="container-event">21</td>
          <td data-container="container-event">22</td>
        </tr>
        <tr>
          <td data-container="container-event">23</td>
          <td data-container="container-event">24</td>
          <td data-container="container-event">25</td>
          <td data-container="container-event">26</td>
          <td data-container="container-event">27</td>
          <td data-container="container-event">28</td>
          <td data-container="container-event">29</td>
        </tr>
        <tr>
          <td data-container="container-event">30</td>
          <td data-container="container-event">31</td>
          <td>&nbsp;</td>
          <td>&nbsp;</td>
          <td>&nbsp;</td>
          <td>&nbsp;</td>
          <td>&nbsp;</td>
        </tr>
      </tbody>
    </table>


  </section>

</body>

</html>

Прошу сильно ссаными тряпками не кидаться, а объяснить что происходит, кажется я не совсем верно понимаю работу циклов. Или же в логике ошибка?

1 ответ 1

2

Проблема в том, что вы сравниваете list[j].innerHTML === arrEvents[i].day. После первого успешного совпадения list[j].innerHTML уже не будет только текст 11, потому что вы добавляете туда несколько новых элементов document.getElementsByTagName('td')[j].appendChild(appendDiv);.

Для обхода этой ситуации можно хранить данные в data-* атрибутах элемента. Вообще, лучше данные хранить там, и по возможности стараться избегать сравнений вида list[j].innerHTML === arrEvents[i].day.

Пример работающего кода.

let arr = [{
    dateEvent: "Первый тест",
    day: "11",
    description: "Первый тест",
    event: "Первый тест",
    names: "Первый тест",
    year: "Октябрь 2017"
  },
  {
    dateEvent: "Второй тест",
    day: "11",
    description: "Первый тест",
    event: "Второй тест",
    names: "Первый тест",
    year: "Октябрь 2017"
  },
  {
    dateEvent: "Третий тест",
    day: "11",
    description: "Первый тест",
    event: "Третий тест",
    names: "Первый тест",
    year: "Октябрь 2017"
  },
  {
    dateEvent: "Четвертый тест",
    day: "10",
    description: "Первый тест",
    event: "Четвертый тест",
    names: "Первый тест",
    year: "Октябрь 2017"
  },

]

const showAllEvents = () => {

  let arrEvents = arr,
    list = document.getElementById("organizer").getElementsByTagName('td'),
    year = document.getElementById('year');

  //берем первый день - внешний цикл
  for (let j = 0; j < list.length; j++) {
    let td = list[j];
    //первый объект в массиве - внутренний цикл
    for (let i = 0; i < arrEvents.length; i++) {
      let event = arrEvents[i];

      //проверяем соответсвие месяца и года с данными в объекте
      if (year.innerHTML === event.year) {

        //проверяем день календаря и день объекта
        if (td.getAttribute("data-day") === event.day) {

          //тут слайсится Событие
          let text = event.event,
            slicedEvent = text.slice(0, 15);

          if (slicedEvent.length < text.length) {

            slicedEvent += '...';
          }

          //создаем див, в него вставляем дивы с данными, которые должны хранится в ячейке
          let appendDiv = document.createElement('div');
          appendDiv.className = 'event-div';

          appendDiv.innerHTML = `
                    <div class="event">` + slicedEvent + `</div>
                    <div class="day-event" style="display: none">` + event.day + `</div>
                    <div class="year-event" style="display: none">` + event.year + `</div>
                    <div class="date-event" style="display: none">` + event.dateEvent + `</div>
                    <div class="names-event" style="display: none">` + event.names + `</div>
                    <div class="description-event" style="display: none">` + event.description + `</div>
                    `;

          //вставляем этот див в текущую ячейку
          //document.getElementsByTagName('td')[j].appendChild(appendDiv);
          td.appendChild(appendDiv); // эквивалетно

        }

        //как я понимаю, внутренний цикл должен повториться и перейти ко второму объекту, 
        //но почему-то вместо этого сразу начинается новая итерация внешнего цикла
      }

    }

  }

};

showAllEvents();
body {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  position: relative;
  z-index: 333;
}

#calendar {
  width: 80%;
  height: 90%;
  margin: 0 auto;
}

#control-month span:first-child,
#control-month span:last-child {
  cursor: pointer;
}

#control-month div {
  cursor: pointer;
}

#organizer {
  border-collapse: collapse;
  width: 100%;
  font-family: monospace;
  line-height: 1.2em;
  font-size: 15px;
  text-align: center;
  word-break: break-all;
  table-layout: fixed;
}

#organizer thead {
  color: rgb(50, 50, 50);
  font-size: 10px;
}

#organizer tbody tr {
  height: 80px;
}

#organizer tbody td {
  position: relative;
  color: rgb(44, 86, 122);
  font-size: 10px;
  vertical-align: top;
  cursor: pointer;
  border: 1px solid dimgrey;
  z-index: 33;
}

#organizer tbody td:nth-child(n+6),
#organizer .holiday {
  color: rgb(231, 140, 92);
}

#organizer tbody td.today {
  background: rgb(220, 0, 0);
  color: #fff;
}

#cover-div {
  width: 15%;
  height: 25%;
  position: absolute;
  background: lightsteelblue;
  border: 1px solid darkgray;
}

#cover-div input,
#cover-div textarea {
  box-sizing: border-box;
}

#overlay-div {
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  position: fixed;
}
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>

<body>

  <section id="calendar">

    <div id="control-month">
      <span>‹</span>
      <span id="year">Октябрь 2017</span>
      <span>›</span>
      <div>Сегодня</div>
    </div>

    <table id="organizer">
      <tbody>
        <tr>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td data-container="container-event" data-day="1">1</td>
        </tr>
        <tr>
          <td data-container="container-event" data-day="2">2</td>
          <td data-container="container-event" data-day="3">3</td>
          <td data-container="container-event" data-day="4">4</td>
          <td data-container="container-event" data-day="5">5</td>
          <td data-container="container-event">6</td>
          <td data-container="container-event">7</td>
          <td data-container="container-event">8</td>
        </tr>
        <tr>
          <td data-container="container-event">9</td>
          <td data-container="container-event" data-day="10">10</td>
          <td class="today" data-container="container-event" data-day="11">11</td>
          <td data-container="container-event">12</td>
          <td data-container="container-event">13</td>
          <td data-container="container-event">14</td>
          <td data-container="container-event">15</td>
        </tr>
        <tr>
          <td data-container="container-event">16</td>
          <td data-container="container-event">17</td>
          <td data-container="container-event">18</td>
          <td data-container="container-event">19</td>
          <td data-container="container-event">20</td>
          <td data-container="container-event">21</td>
          <td data-container="container-event">22</td>
        </tr>
        <tr>
          <td data-container="container-event">23</td>
          <td data-container="container-event">24</td>
          <td data-container="container-event">25</td>
          <td data-container="container-event">26</td>
          <td data-container="container-event">27</td>
          <td data-container="container-event">28</td>
          <td data-container="container-event">29</td>
        </tr>
        <tr>
          <td data-container="container-event">30</td>
          <td data-container="container-event">31</td>
          <td>&nbsp;</td>
          <td>&nbsp;</td>
          <td>&nbsp;</td>
          <td>&nbsp;</td>
          <td>&nbsp;</td>
        </tr>
      </tbody>
    </table>


  </section>

</body>

</html>

P.S. Также немного отрефакторил ваш код.

1
  • Видимо это усталость, ответ то очевиден оказался)) Спасибо огромное!
    – Илья
    Commented 11 окт. 2017 в 12:33

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.