Display table column based on day of week (using html, js/jquery)

shiva
November 2, 2022
268 views
2 votes
3 Answers

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.

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.

function injectDay() {
    var days = ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday',
        'Friday', 'Saturday'];
    var date = new Date();
    var day = days[date.getDay()];

    var tr = document.querySelectorAll('table tr')[0];
    var tds = tr.querySelectorAll('td');
    tds.forEach((td, index) => {
        if (td.innerHTML != day && td.innerHTML !== "Time") {
            document.querySelectorAll('table tr').forEach((tr) => {
                tr.cells[index].style.display = "none";
            })
        }
    });


    document.querySelector('.dayContainer').innerHTML = day;
}

.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;}

<html>
  <head>
  </head>
  <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>
</html>

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 into none, like below.

Hope it helps.

<html>
  <head>
    <script type="text/javascript">
      function injectDay() {
        var days = ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday',
          'Friday', 'Saturday'];
        var date = new Date();

        document.querySelector('.dayContainer').innerHTML = days[date.getDay()];

        let index = 0;
        document.querySelectorAll('thead tr td').forEach(thElement => {
            index++;

            if (thElement.textContent === days[date.getDay()]) {
                thElement.style.display = 'none';

                let tdItems = document.querySelectorAll('tbody tr td:nth-child('+ (index) +')');

                tdItems.forEach(element => {
                    element.style.display = 'none';
                });
            }
        }); 
      }
    </script>
  </head>
  <body onload="injectDay()">
    <div>
        <h3 class="dayContainer"></h3>
        <table>
            <thead>
                <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>
            </thead>
            <tbody>
                <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>

<!-- begin snippet: js hide: false console: true babel: false -->

                    <td>fdf</td>
                    <td>fdf</td>
                </tr>
            </tbody>
        </table>
    </div>
  </body>
</html>

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:

const date = new Date(),
 day = date.toLocaleString("en-US", {weekday: "long"}), // day: today's weekday name in English
 trs = document.querySelectorAll('table tr'), // trs: all TRs of table
 // Do the "difficult" calculations only once:
 // hidden: array containing the indices for all columns to be hidden
 hidden = [...trs[0].cells].reduce((arr,td,i)=>
    (i && td.innerHTML!=day && arr.push(i), arr),[]);

console.log("hidden column indices:",hidden.join(", "));

// The actual nested loop is now very lightweight:
trs.forEach(tr=>hidden.forEach(i=>tr.cells[i].style.display="none"));
document.querySelector('.dayContainer').innerHTML = day;

.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;
}

<html>

<head>
</head>

<body>
  <div>
    <h3>Today is <span class="dayContainer"></span></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>

</html>

Please signup or login to give your own answer.

Click here to cancel reply.