2015-05-21 74 views
2

我正在使用表格來顯示一些文本(每個工作日顯示幾行信息的表格)。這些表格總是包含當天的信息,所以我想關注當前日期(該列,或至少是該列的<th>)。關注表格單元格/列

我需要什麼來實現它? .focus類僅保留用於輸入字段的權利?

(PS:我使用的是引導,如果可以幫助,但我認爲引導不無本)

編輯:如果有幫助,該網站是http://pedrorijo91.github.io/ist-canteen/

+0

你能提供更多細節嗎?一個jsbin或者一些代碼片段將有助於理解你想要達到的目標。 – wrick17

+0

@ wrick17這是網站http://pedrorijo91.github.io/ist-canteen/ 我的目標是專注於當天在手機上打開網站,因爲桌子太大而無法使用手機屏幕 – pedrorijo91

+0

所以如果你在你的手機上查看它,如果你去http://pedrorijo91.github.io/ist-canteen/#thursday它將集中在那裏。如果你動態添加它,你會得到它。 :) – wrick17

回答

2

,併爲您生成的數據只是重新定位你的頁面的尊重ID號。

比方說假如今天是星期四,從您的數據得到它,只是做到以下幾點:

window.location = '#thursday'; 

這將專注週四你想要的。

我已經爲它做了一個bin。 http://jsbin.com/timozi/1/edit?html,js,output

只需將輸出窗口縮小至只顯示前2列或3列並運行代碼即可。第七欄應該突出顯示。

1

你可以給如果您之前在其上設置了tabindex,則將其關注到TD元素。

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

完美的作品,它顯示了正常的焦點行爲,所以適用的焦點CSS規則,如:

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

這是網站http://pedrorijo91.github.io/ist-canteen/ 我的目標是專注於當天在移動網站上打開網站,因爲該表對於手機屏幕來說太大了。在移動的重點是19/5月與您的解決方案,不知道爲什麼 – pedrorijo91

+0

也許有一個錯誤,你選擇的細胞集中的方式,因爲無論如何它是重點之一,這不是第一個 –

1

如果你的強度聽到的是要突出或與以前的數據區分當天的數據只需要添加額外的樣式,這裏的頁面加載後Example..Add類標記 作爲

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

不,我的目標是將'td'集中在手機屏幕上。請查看我對@ anr-upgraded-version問題的評論 – pedrorijo91