javascript - Focus on table cellcolumn - Stack Overflow

admin管理员组

文章数量:1317898

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 /

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/

• javascript
• jquery
• html
• css
• html-table

Share Improve this question Follow edited May 21, 2015 at 14:38 pedrorijo91 asked May 21, 2015 at 12:52 pedrorijo91pedrorijo91 7,86599 gold badges4747 silver badges8989 bronze badges 3

• can u give more details? a jsbin or some code snippet would be helpful to understand what exactly you are trying to achieve. – wrick17 Commented May 21, 2015 at 13:02
• @wrick17 this is the website pedrorijo91.github.io/ist-canteen My goal is to focus on the current day when opening the website in mobile because the table is too big for mobile screens – pedrorijo91 Commented May 21, 2015 at 14:35
• so if you are viewing it on your phone, if u go pedrorijo91.github.io/ist-canteen/#thursday it will be focused there. if you dynamically add it, you'll get it. :) – wrick17 Commented May 21, 2015 at 17:07

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 3

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

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

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

本文标签： javascriptFocus on table cellcolumnStack Overflow