通过单击日历单元格输出数据

时间:2018-02-25 19:52:13

标签: javascript date html-table

我正在尝试使用纯JavaScript开发日历。

HTML中有表7x7,包括工作日的标题字符串。用数据填充单元格正常工作。

但我需要通过双击实现所选日期的消息显示。 但现在每次都发生相同的日期(29.01.2018) - 正好在这个日期表填写完成。

var local_date;
function calendarFill(){  
    local_date = new Date(); 
    var week_day = local_date.getDay();

    var i;  // defines which line to fill from
    var j;  //defines which column to fill in current month from
    var k;  //defines which column to fill in previous month from
    if(week_day==1){// if first week's day of current month is monday then it wirtes to the second line, in other case to the first line
        i=2;
        j=week_day-1;
        k=6;
    }
    if(week_day==0){// if first week's day is sunday
        i=1;
        j=6;
        k=5;
    }
    else{
        i=1;
        j=week_day-1;
        k=week_day-2;
    }
    var rows = document.getElementsByTagName('tr');    
 table with numbers of current and next month
    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'); //filling calendar table with numbers of previous month
    for(k; k>=0; k--){ //filling numbers of previous in reversed order
        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('Has selected: '+local_date);
            }
        }
        j=0;
    }
}

如何更正代码以正确填充日历并通过点击幕布日历单元来提供日期消息?

EDIT1

<table>
                <tr>
                    <th>Mo</th>
                    <th>To</th>
                    <th>We</th>
                    <th>Th</th>
                    <th>Fr</th>
                    <th class="weekend">Sa</th>
                    <th class="weekend">Su</th>
                </tr>
                <tr>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td class="weekend"></td>
                    <td class="weekend"></td>
                </tr>
                <tr>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td class="weekend"></td>
                    <td class="weekend"></td>
                </tr>
                <tr>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td class="weekend"></td>
                    <td class="weekend"></td>
                </tr>
                <tr>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td class="weekend"></td>
                    <td class="weekend"></td>
                </tr>
                <tr>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td class="weekend"></td>
                    <td class="weekend"></td>
                </tr>
                <tr>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td class="weekend"></td>
                    <td class="weekend"></td>
                </tr>
            </table>

0 个答案:

没有答案