Я пытаюсь сделать календарь на 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;
}
}
Как исправить код, чтобы и заполнение календаря происходило корректно, и можно было получать сообщение с датой о кликнутой ячейке?
ну как я вижу, вы создаёте глобальную переменную 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)
})
})
}
Сейчас часто стал использовать в jquery такой стиль написание обработки событий
Помогите найти решениеРаботаю в canvas, нужно вывести в текст и если он длинее ширины моего окна нужно перевести на новую строку
В общем прикрутил форму живого поиска по содержимому таблицу,но при вводе туда данных страница сжимается