javascript - 在悬停时创建多个 div(或表格)

Question

我正在尝试创建一个相当基本的日历。这是我的 HTML:

<div class="calendar">
        <div class="row clearfix">
            <div class="col-1-4" id="month-1"><h3>January</h3></div>
            <div class="col-1-4" id="month-2"><h3>February</h3></div>
            <div class="col-1-4" id="month-3"><h3>March</h3></div>
            <div class="col-1-4" id="month-4"><h3>April</h3></div>
        </div>
        <div class="row clearfix">
            <div class="col-1-4" id="month-5"><h3>May</h3></div>
            <div class="col-1-4" id="month-6"><h3>June</h3></div>
            <div class="col-1-4" id="month-7"><h3>July</h3></div>
            <div class="col-1-4" id="month-8"><h3>August</h3></div>
        </div>
        <div class="row clearfix">
            <div class="col-1-4" id="month-9"><h3>September</h3></div>
            <div class="col-1-4" id="month-10"><h3>October</h3></div>
            <div class="col-1-4" id="month-11"><h3>November</h3></div>
            <div class="col-1-4" id="month-12"><h3>December</h3></div>
        </div>
</div>

悬停时，我希望显示该特定月份的日期。而不是像这样为每个月创建一个表:

<table class="days">
                <tr>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td>1</td>
                    <td>2</td>
                    <td>3</td>
                    <td>4</td>
                </tr>
                ....
                <tr>
                    <td>26</td>
                    <td>27</td>
                    <td>28</td>
                    <td>29</td>
                    <td>30</td>
                    <td>31</td>
                    <td></td>
                </tr>
</table>

或者每个月创建 35 个 div，有没有办法创建一个表格或一组每个月都可以使用的 div？

很明显，问题在于月份之间的安排和天数不同。有没有可以编写的脚本来适应这个？这种方式看起来会更清洁和高效。

或者单独处理每个月会更简单吗？

谢谢。

Answer 1

这是根据您的要求生成表格的 javascript 代码。

var _Days = new Array("sun", "mon", "tue", "wed", "thr", "fri", "sat"); //declare 7 days 

function getCalendar(){
var tempDate = new Date("2014/09/01"); //create date object of month and year you want create calendar here. 
var firstDayOfMonth = tempDate.moveToFirstDayOfMonth().getDayName();
var daysInMonth = tempDate.moveToLastDayOfMonth().getDate();
var i = 1, j = 1, html = '<table>';
//create header 
html += '<tr><th scope="col">sun</th><th scope="col">sun</th>' +
                                 '<th scope="col">tue</th><th scope="col">wed</th> ' +
                                 '<th scope="col">thr</th><th scope="col">fri</th> ' +
                                 '<th scope="col">sat</th></tr>'
while (j <= daysInMonth) {
                html += '<tr>';
                $(_Days).each(function (index) {
                    if ((this == firstDayOfMonth || j > 1) && (j <= daysInMonth)) {                 
                            html += '<td>' + j + '</td>'
                        j++;
                    } else {
                        html += '<td>&nbsp;</td>';
                    }
                });
                html += '</tr>'
            }
}
html+='</table>';

表格 html 现在已准备就绪，您可以根据需要使用它。不要忘记添加 Datejs 的引用。