I have the following html table:
Based on current day, only columns corresponding the particular day should be displayed.
For example, if today is Monday, except columns corresponding to Monday all others should be hidden:
What I have tried is to employ the following js code to get the day of week and hide unhide a div (jsfiddle):
function injectDay() {
var days = ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday',
'Friday', 'Saturday'];
var date = new Date();
document.querySelector('.dayContainer').innerHTML = days[date.getDay()];
}
.table-responsive{
height:180px; width:50%;
overflow-y: auto;
border:2px solid #444;
}.table-responsive:hover{border-color:red;}
table{width:100%;}
td{padding:24px; background:#eee;}
<body onload="injectDay()">
<div>
<h3 class="dayContainer"></h3>
<table>
<tr>
<td>Time</td>
<td>Sunday</td>
<td>Monday</td>
<td>Tuesday</td>
<td>Wednesday</td>
<td>Thursday</td>
<td>Friday</td>
<td>Saturday</td>
<td>Sunday</td>
<td>Monday</td>
</tr>
<tr>
<td>8to9</td>
<td>df</td>
<td>rer</td>
<td>jkhj</td>
<td>er</td>
<td>dfdf</td>
<td>thh</td>
<td>trttt</td>
<td>dffs</td>
<td>dfd</td>
</tr>
<tr>
<td>9to10</td>
<td>fdf</td>
<td>jjj</td>
<td>hj</td>
<td>re</td>
<td>ffee</td>
<td>ffgs</td>
<td>juff</td>
<td>gfdd</td>
<td>hjj</td>
</tr>
<tr>
<td>10to11</td>
<td>fdf</td>
<td>gffg</td>
<td>gh</td>
<td>jjjj</td>
<td>fdf</td>
<td>kgfg</td>
<td>fdff</td>
<td>rrtt</td>
<td>ghfd</td>
</tr>
<tr>
<td>11to12</td>
<td>fdf</td>
<td>gg</td>
<td>gh</td>
<td>gfgf</td>
<td>fdf</td>
<td>trrr</td>
<td>rtrw</td>
<td>fdf</td>
<td>fdf</td>
</tr>
</table>
</div>
</body>
But I don’t know how to hide/unhide columns of the table of interest.
3
Answers
Get TDs of first raw and check whether the content is same as the day value. If there is a matched index, hide all tds in tht index. indexes.
http://jsfiddle.net/qhpmn2gr/
You should control html object in the DOM using JavaScript.
Here, you can change the corresponding object’s attribute
display
‘s value intonone
, like below.Hope it helps.
Here is another take on @Nitha’s solution. However, I nested the loops slightly differently and ran the exclusion calculations before the nested
forEach()
loop: