关注 table cell/column

Question

我正在使用 table 来显示一些文本（table 每个工作日显示几行信息）。 tables 总是包含当天的信息，所以我想关注当天（列，或至少列的 <th>）。

我需要什么来实现它？ .focus class 仅保留用于输入字段，对吗？

（Ps：我正在使用 bootstrap，如果这可能有帮助，但我认为 bootstrap 对此没有任何帮助）

编辑：如果有帮助，网址是http://pedrorijo91.github.io/ist-canteen/

Answer 1

如果您之前在 TD 元素上设置了 tabindex，则可以将焦点放在它上。

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

完美运行，显示正常的焦点行为，因此应用焦点 css 规则，例如：

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

Answer 2

如果您的强度听到的是突出显示或区分当前数据与以前的数据，只需添加额外的样式，如此处的示例..添加 class 到标签作为

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

Answer 3

加载页面并生成数据后，只需将页面重定向到相应的 ID。

例如，如果是星期四，从您的数据中获取它并执行以下操作：

window.location = '#thursday';

这将按照您的意愿在星期四重点关注。

我已经为它做了一个垃圾箱。 http://jsbin.com/timozi/1/edit?html,js,output

只需拖动输出 window 使其变窄，以便仅显示前 2 或 3 列和运行代码。应突出显示第七列。

关注 table cell/column

Focus on table cell/column

html

javascript

css

jquery

html-table