日历，需要隐藏星期六和星期日的方法？

本文介绍了日历，需要隐藏星期六和星期日的方法？的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！ 问题描述

我试图让我的应用程序隐藏周末日子，我的日历存储在一个字符串中，然后打印到innerHTML。我将如何隐藏周六和周日。

我的日历打印如下：

星期日星期一周二周三周四周五周六 $ p $ b $ pre $ calendarString ='' ; calendarString + ='< table width =100％height =425data-role =tableborder =1bordercolor =＃c0c0c0cellpadding =0cellspacing =0 >'; calendarString + ='< tr>'; calendarString + ='< td bgcolor = \＃DDDDDD \align = \center \valign = \center \width = \40 \height = \ 22\ >周日及LT; \ / TD>'; calendarString + ='< td bgcolor = \＃DDDDDD \align = \center \valign = \center \width = \40 \height = \ 22\ >星期一及LT; \ / TD>'; calendarString + ='< td bgcolor = \＃DDDDDD \align = \center \valign = \center \width = \40 \height = \ 22\ >星期二< \ / TD>'; calendarString + ='< td bgcolor = \＃DDDDDD \align = \center \valign = \center \width = \40 \height = \ 22\ >三及LT; \ / TD>'; calendarString + ='< td bgcolor = \＃DDDDDD \align = \center \valign = \center \width = \40 \height = \ 22\ >星期四< \ / TD>'; calendarString + ='< td bgcolor = \＃DDDDDD \align = \center \valign = \center \width = \40 \height = \ 22\ >周五< \ / TD>'; calendarString + ='< td bgcolor = \＃DDDDDD \align = \center \valign = \center \width = \40 \height = \ 22\ >周六及LT; \ / TD>'; calendarString + ='< \ / tr>'; thisDate == 1; （var i = 1; i <= 6; i ++）{ calendarString + ='< tr>'; ; for（var x = 1; x <= 7; x ++）{ daycounter =（thisDate - firstDay）+1; thisDate ++; （（daycounter> numbDays）||（daycounter< 1））{ calendarString + ='< td align = \center \bgcolor = \＃888888 \\height = \30 \width = \40 \>& nbsp;< \ / td>'; $（b）b} 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 \ onClick = showevents（'+ daycounter +'，'+ monthNum +'，'+ yearNum +'，'+ i +'，'+ x +'）>'+ daycounter +' < div id =amounteventstyle =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;

解决方案

在表格中添加class =weekend属性周日和周六的细胞。然后使用javascript为该类设置CSS样式：

.weekend {display：none;}

更新：更一般地，如果您的表看起来像这样：

< table class =calendar> < tr>< td class =weekend>周日< / td>< td>周一< / td>< td>周二< / td>< td> < td>周四< / td>< td>周五< / td>< td class =周末>周六< / td>< / tr> < tr>< td class =weekend>< / td>< td> 1< / td>< td> 2< / td> < td> 4< / td>< td> 5< / td>< td class =weekend> 6< / td>< / tr> ... < tr>< td class =weekend> 28< / td>< td> 29< / td>< td> td>< / td>< td>< / td>< td>< / td>< td class =weekend>< / td>< / tr> < / table> < button type =buttononclick =hideWeekends（）>隐藏周末< / button>

风格：

table.calendar {width：100％}

和javascript：

function hideWeekends（）{ //将display：none样式应用于classname为weekend的元素。如果可用，我建议使用jQuery。 }

I'm trying to allow my application to hide weekend days, my calendar is stored within a string then printed to innerHTML. How would I go about hiding both Saturday and Sunday.

My calendar prints like the following:

Sunday Monday Tuesday Wednesday Thursday Friday Saturday

Code:

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;

解决方案

Add a class="weekend" attribute on the table cells for Sunday and Saturday. Then use javascript to set the CSS styling for that class to:

.weekend {display: none;}

Update: More generally if your table looked something like:

<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>

And style:

table.calendar {width: 100%}

And javascript:

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