Focus on table cell/column

Question

I'm using a table for display some text (a table that for each weekday displays several rows of information). The tables always contains information for the current day, so I would like to focus the current day (the column, or at least the <th> of the column).

What do I need to achieve it? The .focus class is reserved only for input fields right?

(Ps: I'm using bootstrap, if that may help, but I think bootstrap does not have nothing for this)

Edit: If it helps, the website is http://pedrorijo91.github.io/ist-canteen/

Answer 1

You can give focus to a TD element if you previously set tabindex on it.

var td = getElementById('someTD');
td.setAttribute('tabindex', 10000);    // or other number
td.focus();

Works perfectly, it shows normal focus behavior, so applies focus css rules like:

td:focus { background: #E0F8E0; border: 1px dashed red; }

Answer 2

After the page is loaded and your data is generated just redirect your page to the respective id.

Say for example if it is thursday, get it from your data and just do the following:

window.location = '#thursday';

this will focus thursday as you wanted.

I have done a bin for it. http://jsbin.com/timozi/1/edit?html,js,output

Just drag the output window to be narrow so that only first 2 or 3 columns are shown and run the code. The seventh column should be highlighted.

Answer 3

If your intensity hear is to highlight or differentiate current day data with previous data just add extra styles as here for Example..Add class to tag as

<tr class="current-day">
<td>data1</td>
<td>data2</td>
<td>data3</td>
<td>data4</td>
</tr> 

 .current-day
 {
   background:#006621;
   color:#fff;
 } 

.current-day td
{
   background:#006621;
   color:#fff;
}