日历，需要一种方法来隐藏星期六和星期日？

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

添加类=“周末”的表格单元格属性为周日和星期六。然后使用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. 
}