1

Я пытаюсь сделать календарь на javascript. В html определена таблица 7x7 включая строку заголовков дней недели.Заполнение датами происходит корректно. Нужно, чтобы по клику на ячейку появлялось сообщение с датой выбранной ячейки. Но при каждом клике выводится одна и та же дата - 29.01.2018. Именно на этой дате закончилось заполнение таблицы.

var local_date;
function calendarFill(){  
    local_date = new Date();   

    var week_day = local_date.getDay();
    var i;  //определяет с какой строчки надо заполнять дни текущего месяца
    var j;  //определяет с какого столбца надо заполнять дни текущего месяца
    var k;  //определяет с какого столбца надо заполнять дни предыдущего месяца
    if(week_day==1){//если день недели 1го числа текущего месяца - понедельник, то оно записывается во 2ой строчке, во всех остальных случаях в 1ой строчке
        i=2;
        j=week_day-1;
        k=6;
    }
    if(week_day==0){//если день недели 1го числа - воскресение
        i=1;
        j=6;
        k=5;
    }
    else{
        i=1;
        j=week_day-1;
        k=week_day-2;
    }
    var rows = document.getElementsByTagName('tr');    
    for(i; i<7; i++ ){
        var columns = rows[i].getElementsByTagName('td');
        for(j; j<7; j++){
            columns[j].innerHTML = local_date.getDate().toString();
            local_date.setDate(local_date.getDate()+1);
        }
        j=0;
    }

    local_date = new Date();
    var columns = document.getElementsByTagName('tr')[1].getElementsByTagName('td');
    for(k; k>=0; k--){ //заполнение чисел предыдущего месяца в обратном порядке
        local_date.setDate(local_date.getDate()-1);
        columns[k].innerHTML = local_date.getDate().toString();
    }
}

function cellClicked() {
    var rows = document.getElementsByTagName('tr');    
    for(var i=1; i<7; i++ ){
        var columns = rows[i].getElementsByTagName('td');
        for(var j=0; j<7; j++){
            columns[j].onclick{
               alert('выбрана дата'+local_date);
            }
        }
        j=0;
    }
}

Как исправить код, чтобы и заполнение календаря происходило корректно, и можно было получать сообщение с датой о кликнутой ячейке?

0

1 ответ 1

1

ну как я вижу, вы создаёте глобальную переменную local_date, далее в эту переменную создаёте дату, и помещаете в нужный td. По окончанию всего цикла, у вас в переменной local_date остаётся последняя дата, и при клике вы выводите именно её (переменную local_date - в которой последняя дата). как вариант выводите

columns[j].innerHTML

И ещё, не понятно зачем вы делаете две выборки - в cellClicked() лучше же просто одну

function cellClicked() {
    var td = document.querySelectorAll('table td');  
    td.forEach(function(el){
      console.log(el)
      el.addEventListener('click', function(){
        console.log(this.innerHTML)

      })
    })
}
2
  • В сolumns[j].innerHTML находится только число, а необходима вся дата
    – lipton_v
    26 фев 2018 в 5:05
  • ну так тогда кидайте это всё в объект какой нибудь. давайте id ячейки и по клику, берите id (или другой уникальный атрибут) и из объекта доставайте дату. 26 фев 2018 в 6:37

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

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