Cycle error breaks the table



  • I'm building a table in js code, the table is not correct.

    It happens:

    <table class="table">
       <tbody>
          <tr><td></td></tr>
          <tr><td></td><tr>
       </tbody>
       <tr><td></td></tr>
    

    i.e. one line goes. tbody♪ I think there's a mistake in the cycle. ♪ ♪

    It's full code. http://jsfiddle.net/lilubanana/fwxuf5ea/28/ )

    'use strict';
    

    function getRuLocaleWeekDay(computed_day) {
    return (computed_day + 6) % 7;
    }

    var calendarDate = new Date(),
    year = calendarDate.getFullYear(),
    month = calendarDate.getMonth(),
    presentDay = calendarDate.getDate(),
    lastDayMonth = new Date(year, month + 1, 0).getDate(),
    weekDay = ['Пн', 'Вт', 'Ср', 'Чт', 'Пт', 'Сб', 'Вс'],
    divTable = document.createElement('table'),
    newRow = divTable.insertRow(-1),
    newCell, firstWeekDay = new Date(year, month, 1).getDay(),
    monthName = ['Январь', 'Февраль', 'Март', 'Апрель', 'Май', 'Июнь', 'Июль', 'Август', 'Сентябрь', 'Октябрь', 'Ноябрь', 'Декабрь'];

    divTable.className = 'table';

    var month_cell = newRow.insertCell(-1);
    month_cell.setAttribute('colspan', 7);
    month_cell.className = 'title-month';
    month_cell.appendChild(document.createTextNode(monthName[calendarDate.getMonth()]));

    newRow = divTable.insertRow(-1);
    for (var i = 0, I = weekDay.length; i < I; i++) {
    newCell = newRow.insertCell(-1);
    newCell.className = 'odd';
    newCell.appendChild(document.createTextNode(weekDay[i]));
    }

    newRow = divTable.insertRow(-1);
    lastDayMonth = lastDayMonth + getRuLocaleWeekDay(firstWeekDay);

    for (i = 1; i <= lastDayMonth; i++) {
    if (i % 7 == 1) {
    newRow = divTable.insertRow(-1);
    }
    var date = i - getRuLocaleWeekDay(firstWeekDay); //переменная минус 6 дней

    newCell = newRow.insertCell(-1);

    if (presentDay == date) {
    newCell.className = 'present-day';
    }

    if (i <= getRuLocaleWeekDay(firstWeekDay)) {
    newCell.innerHTML = '';
    } else {
    newCell.innerHTML = date;
    }

    }

    var lastDateWeek = getRuLocaleWeekDay(new Date(year, month, lastDayMonth - getRuLocaleWeekDay(firstWeekDay)).getDay());

    for (var i = lastDateWeek; i < 6; i++) {
    newRow.insertCell(-1);
    }

    divTable.appendChild(newRow);
    document.getElementById('calendar').appendChild(divTable);

    var cells = document.getElementsByTagName('td');
    for (var i = 0; i < cells.length; i++) {
    if (cells[i].innerHTML != '') {
    cells[i].addEventListener('click', selectDate);
    }
    }

    function selectDate() {
    if (this.classList.contains('active')) {
    this.classList.remove('active');
    } else {
    this.classList.add('active');
    }
    }

    body {
    font-size: 30px;
    font-family: monospace;
    color: #5A5A5A;
    }
    .table {
    display: table;
    /opacity:0.1;/
    border: 2px solid hotpink;
    margin: 50px auto;
    border-collapse: collapse;
    position: relative;
    -webkit-animation-name: show;
    -webkit-animation-duration: 1s;
    animation-name: show;
    animation-duration: 1s;
    }
    @-webkit-keyframes show {
    0% {
    opacity: 0;
    }
    100% {
    opacity: 1;
    }
    }
    @keyframes show {
    0% {
    opacity: 0;
    }
    100% {
    opacity: 1;
    }
    }
    .table tr td:last-child {
    background: rgba(255, 105, 180, 0.2);
    }
    td {
    border: 1px solid hotpink;
    padding: 5px;
    cursor: pointer;
    }
    td:hover {
    background-color: pink;
    }
    .active {
    background-color: pink;
    }
    td.odd {
    background-color: rgba(211, 211, 211, 0.5);
    }
    .title-month {
    font-size: 30px;
    text-align: center;
    font-weight: bold;
    text-transform: uppercase;
    }
    td.present-day {
    background: rgba(155, 89, 182, 0.5);
    }
    <div id="calendar"></div>



  • divTable.appendChild(newRow);
    

    - 62 lines in the feddle, remove it.


Log in to reply
 


Suggested Topics

  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2