我可以在沒有Java腳本的情況下進行TR點擊嗎？

我目前有一個java腳本解決方案，使整個表格行可點擊。我需要支持非Java腳本的人，所以這可能沒有Java腳本？我可以在沒有Java腳本的情況下進行TR點擊嗎？

我可以爲每個單元格添加一個href標籤，但這看起來像是過度殺傷，它也只允許用戶單擊單元格的內容。

將整個表格行變成超鏈接的其他選擇？

來源

2012-01-10 Paul

你絕對必須使用'table'嗎？現在，由於各種原因，表格有些不受歡迎。 – 2012-01-10 17:13:30

@Mike表格可以很好地用於表格數據。 – grapefrukt 2012-01-10 17:16:01

是的，但是，如果海報使用表格進行佈局或表格數據，我不清楚。我想我會問，因爲只要不使用表格就可以很容易地解決問題。 – 2012-01-10 17:22:40

不幸的是，在每個單元格內都沒有鏈接，否則它不是有效的標記。

你仍然可以使它看起來像「行」是可點擊的，但通過使鏈接顯示爲塊，以便它們佔據整個單元格。

例如（jsFiddle）

<table> 
    <tr> 
     <td><a href="#">Some text</a></td> 
     <td><a href="#">more text</a></td> 
     <td><a href="#">more text</a></td> 
    </tr> 
</table> 

tr:hover { background: #ddd; } 
td { border: 1px solid #000; border-collapse: collapse; } 
td a { display: block; padding: 5px 20px; }

來源

2012-01-10 17:17:46

顯示塊將工作。這是推薦的方式還是應該不使用表格？ – Paul 2012-01-10 17:34:01

@Paul如果你正在顯示錶格數據，你應該只使用表格。如果它是表格數據，那麼我的答案是要走的路。如果它不是表格數據，那麼你應該使用表以外的其他東西。 – 2012-01-10 17:43:40

各種瀏覽器可能允許或不允許你用href包裝整個TR，但即使瀏覽器支持這一點，它也是無效的（X）HTML，並且結果會因瀏覽器而異不可靠的方式（更新可能會改變行爲）。

你最好的選擇是使用JS，或者在每個單元格內放置一個href。

來源

2012-01-10 17:11:13 KOGI

我意識到這是一個古老的線程與豐富的答案完全合法的解決方案。然而，還有一種方法可以在沒有javascript的情況下執行此操作，並且不會重複您的鏈接*列的數量並保持您的標記/ CSS有效。我花了一段時間才弄清楚，所以我想我會把它發佈到其他地方，就像我一樣，最終發生在這個線程上。

連結放在第一列：

<table class="search_results"> 
    <tr> 
     <td><a href="#">Some text</a></td> 
     <td>more text</td> 
     <td>more text</td> 
    </tr> 
</table>

這是完全正常的標記，所以你唯一的真正的問題是如何鏈接到你的跨越表格的寬度。我做了這樣的使用相當標準的CSS：

table.search_results a {position:absolute;display:block;width:98%;}

改變寬度爲任何你想要的，原則上你已經完成和撒粉。所有這些都是相對容易的，但是如果你像我一樣有一個流暢的響應式佈局，還有一些標準的鏈接樣式和你的表格上的填充，你將需要這些規則（從上面複製並添加額外）。

table.search_results td:first-child {padding:0;} 
table.search_results a {position:absolute;display:block;width:98%;max-width:1272px;font-weight:normal;color:#000;padding:.5em;} 
table.search_results a:hover {background:none;} 
table.search_results tr:hover {border-color:#25505b;background:#b5d6dd;}

解釋道：第一條規則中刪除我的第一次ONLY TD的所有填充。默認情況下，我的td上的填充是.5em。第二條規則在鏈接上添加相同的填充，否則最終會導致單元格內容未對齊。它還糾正了我的一些標準樣式，以確保列全部看起來相同。你也可以這樣做（將鏈接樣式添加到你的td中）。在最後兩條規則中，我擺脫了鏈接上的默認懸停效果，然後將它放在具有正確類的任何表的tr上。

這適用於我關心的瀏覽器，但你當然應該在那些你關心的人那裏測試:)希望我能幫助保存某人幾分鐘的時間！

來源

2013-12-06 15:46:29 sckd

我可以在沒有Java腳本的情況下進行TR點擊嗎？

回答

相關問題