Question

我试图允许我的应用程序隐藏周末，我的日历存储在一个字符串中然后打印到innerHTML。我怎样才能隐藏周六和周日。

我的日历打印如下：

周日周一周二周三周四周五周六

代码：

calendarString = '';
calendarString += '<table width="100%" height="425" data-role="table" border="1" bordercolor="#c0c0c0" cellpadding="0" cellspacing="0">';
calendarString += '<tr>';
calendarString += '<td bgcolor=\"#DDDDDD\" align=\"center\" valign=\"center\" width=\"40\" height=\"22\">Sun<\/td>';
calendarString += '<td bgcolor=\"#DDDDDD\" align=\"center\" valign=\"center\" width=\"40\" height=\"22\">Mon<\/td>';
calendarString += '<td bgcolor=\"#DDDDDD\" align=\"center\" valign=\"center\" width=\"40\" height=\"22\">Tue<\/td>';
calendarString += '<td bgcolor=\"#DDDDDD\" align=\"center\" valign=\"center\" width=\"40\" height=\"22\">Wed<\/td>';
calendarString += '<td bgcolor=\"#DDDDDD\" align=\"center\" valign=\"center\" width=\"40\" height=\"22\">Thu<\/td>';
calendarString += '<td bgcolor=\"#DDDDDD\" align=\"center\" valign=\"center\" width=\"40\" height=\"22\">Fri<\/td>';
calendarString += '<td bgcolor=\"#DDDDDD\" align=\"center\" valign=\"center\" width=\"40\" height=\"22\">Sat<\/td>';
calendarString += '<\/tr>';
thisDate == 1;

for(var i = 1; i <= 6; i++){
    calendarString += '<tr>';
    for (var x = 1; x <= 7; x++){
        daycounter = (thisDate - firstDay)+1;
        thisDate++;
        if((daycounter > numbDays) || (daycounter < 1)) {
            calendarString += '<td align=\"center\" bgcolor=\"#888888\" height=\"30\" width=\"40\">&nbsp;<\/td>';
        } else {
            if (checkevents(daycounter,monthNum,yearNum,i,x) || ((todaysDay == x) && (todaysDate == daycounter) && (todaysMonth == monthNum))){
                if ((todaysDay == x) && (todaysDate == daycounter) && (todaysMonth == monthNum)){
                    tempweek = i;
                    tempdayofweek = x;
                    calendarString += '<td style=\"vertical-align: top;\" bgcolor=\"#AAFFAA\" height=\"30\" width=\"40\" onClick=showevents(' + daycounter + ',' + monthNum + ',' + yearNum + ',' + i + ',' + x + ')>' + daycounter + '<\/td>';
                } else 
                    calendarString += '<td style=\"vertical-align: top;\" bgcolor=\"#FFFFC8\" height=\"30\" width=\"40\" onClick=showevents(' + daycounter + ',' + monthNum + ',' + yearNum + ',' + i + ',' + x + ')>' + daycounter + '<div id="amountevent" style="padding-left:5px;max-height:8px; height:8px; width:30px; max-width:30px;white-space: nowrap;">' + displayeventnumber(daycounter, monthNum, yearNum) + '</div><\/td>';           
            } else 
                calendarString += '<td style=\"vertical-align: top;\" bgcolor=\"#f9f9f9\" height=\"30\" width=\"40\">' + daycounter + '<\/td>';
        }
    }
    calendarString += '<\/tr>';
}
calendarString += '<\/table>';
var object=document.getElementById('calendar');
object.innerHTML= calendarString;
thisDate = 1;

Answer 1

在星期日和星期六的表格单元格中添加class =“weekend”属性。然后使用javascript将该类的CSS样式设置为：

.weekend {display: none;}

更新：更常见的是，如果你的表看起来像：

<table class="calendar">
    <tr><td class="weekend">Sunday</td><td>Monday</td><td>Tuesday</td><td>Wednesday</td><td>Thursday</td><td>Friday</td><td class="weekend">Saturday</td></tr>
    <tr><td class="weekend"></td><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td class="weekend">6</td></tr>
    ...
    <tr><td class="weekend">28</td><td>29</td><td>30</td><td></td><td></td><td></td><td class="weekend"></td></tr>
</table>

<button type="button" onclick="hideWeekends()">Hide Weekends</button>

风格：

table.calendar {width: 100%}

和javascript：

function hideWeekends() {
    // apply display: none style to elements with classname of "weekend". I recommend using jQuery if available.
}

日历，需要一种隐藏星期六和太阳的方法吗？

1 个答案: