使表行可單擊

Question

我想知道整個tr可點擊的最佳方法是什么？

最常見的（也是唯一的？）解決方案似乎是使用JavaScript，使用onclick =“javascript：document.location.href（'bla.htm'）;” （不要忘記：使用onmouseover / onmouseout設置正確的光標）。

雖然這有效，但遺憾的是，與普通鏈接不同，目標URL在瀏覽器的狀態欄中不可見。

所以我只是想知道是否有任何優化空間？ 是否可以在瀏覽器的狀態欄中顯示將導航到的URL？ 或者是否有一種非JavaScript方式可以使tr可點擊？

Answer 1

如果你不想使用javascript，你可以通過在匹配的錨標簽中包裝每個td元素的內容來做Chris Porter建議的。 然后將錨標記設置為display: block並將height和line-height設置為與td的高度相同。 然后你應該發現td的觸摸無縫，效果是整行是可點擊的。 注意td上的填充，這將導致可點擊區域中的間隙。 相反，將填充應用於錨標記，因為如果您這樣做，它將構成可點擊區域的一部分。

我還想通過在tr：hover上應用不同的背景顏色來將行設置為具有高光效果。

例

對於最新的Bootstrap（3.0.2版），這里有一些快速的CSS來展示如何做到這一點：

table.row-clickable tbody tr td {
    padding: 0;
}

table.row-clickable tbody tr td a {
    display: block;
    padding: 8px;
}

這是一個可以使用的示例表：

<table class="table table-hover row-clickable">
    <tbody>
        <tr>
            <td><a href="#">Column 1</a></td>
            <td><a href="#">Column 2</a></td>
            <td><a href="#">Column 3</a></td>
        </tr>
    </tbody>
</table>

這是一個顯示此操作的示例 。

Answer 2

使用jQuery，您可以按照以下方式執行某些操作：

$('tr').click(function () {
  $(this).toggleClass('highlight_row');
}); 

然后在CSS文件中添加highlight_row，該行將其類更改為highlight_row。 您可以在該行中換出您想要做的任何事情（以及更改$（'tr'）以適合您的特定行。

Answer 3

我發現這個解決方案效果很好：

$(document).ready(function() {
    $('#example tr').click(function() {
        var href = $(this).find("a").attr("href");

        if(href) {
            window.location = href;
        }
    });
});

只是不要忘記將光標設置為tr:hover上的指針

#table tr:hover {cursor: pointer;}

資料來源： http ： //www.electrictoolbox.com/jquey-make-entire-table-row-clickable/

Answer 4

“

最常見的（也是唯一的？）解決方案似乎是使用JavaScript，使用onclick="javascript:document.location.href('bla.htm');" （不要忘記：使用onmouseover / onmouseout設置正確的光標）。

“

onclick命令應該如下所示：

onclick="window.location.href='bla.html';"

並且沒有必要對游標執行任何onmouseover / -out，因為只有當鼠標懸停元素時，游標屬性才有效：

style="cursor:pointer;"

Answer 5

另一種方法是實際鏈接每個單元格的內容。 如有必要，您可以更改樣式，使它們看起來不像傳統鏈接。

請注意，您嘗試執行的操作確實會破壞直觀的用戶體驗。 需要明確的是，點擊一行會有所作為。 我通常喜歡在每行的邊緣放一個圖標（放大鏡等），這些圖標會鑽入新的頁面。

Answer 6

幸運或不幸的是，大多數現代瀏覽器都不允許你控制狀態欄（由於欺詐意圖，它可能在當天流行）。

你最好的選擇是標題屬性或javascript工具提示 。

Answer 7

如果你的表里面沒有鏈接，那么下面的技巧應該可行。

將整個表放入鏈接並更改onmouseover事件行中鏈接的href屬性。

演示代碼：

<script type="text/javascript">
function setLink(elRow) {
var elLink = document.getElementById('link');
elLink.href = elRow.rowIndex + ".com";
}
</script>
...
<a id=link>
<table>
    <tr onMouseOver="setLink(this);"><td>first row</td></tr>
    <tr onMouseOver="setLink(this);"><td>second row</td></tr>
</table>
</a> 

Answer 8

我意識到這是一個老線程，在Alice的回答中有一個完全合法的解決方案。 然而，還有一種方法可以在沒有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;}

解釋：第一條規則只刪除我第一個td上的所有填充。 默認情況下，我的td上的填充是.5em。 第二個規則在鏈接上添加相同的填充，否則最終會出現未對齊的單元格內容。 它還糾正了我的一些標准樣式，以確保列看起來都一樣。 您也可以通過其他方式執行此操作（將鏈接樣式添加到您的td）。 使用最后兩條規則，我擺脫了鏈接上的默認懸停效果，然后將它放在tr上，用於任何具有正確類的表。

這適用於我關心的瀏覽器，但你當然應該在你關心的人身上進行測試:)希望我能用這篇文章幫助你節省一些時間！

Answer 9

這是一個黑客，但你可以添加到您的tr ：

onmouseover="window.status='http://bla.com/bla.htm'" 

不要忘記設置假鏈接的樣式：

tr.clickable {
    cursor: hand; 
    cursor: pointer;
}

Answer 10

您也可以嘗試在href中包裝行的單元格的內容，並使用CSS將href高度/寬度推送到每個單元格的內部邊界。 該行本身不可點擊（除非您向該行添加了額外的html），但該行的大部分內容空間將像普通鏈接（光標，狀態欄等）。 我不記得我以前是怎么做到這一點的，但是我很成功地讓這個工作了。

編輯：評論要求提供更多詳細信息，他們被其他用戶的后期帖子所覆蓋，但我沒有意識到這一點，直到我進一步研究這個建議並進行了測試。

如果將“display：block”CSS樣式標記添加到要單擊的單元格中的錨點對象，則會使整個單元格（減去任何填充）像按鈕一樣。 光標正確顯示，並預覽狀態欄中的鏈接目標。 這一切都是用零javascript完成的。 祝好運。

Answer 11

我有同樣的問題，我只使用CSS解決了它。 我認為這對我來說是最好的解決方案，因為我也在JSF中使用它。

只需將樣式類分配給表格就可以了....

在這里：

CSS：

.myDataTable {
    background: 444;
    width: 100%;
}

.myDataTable thead tr {
    background-image: url('../img/tableHeader.jpg');
}

.myDataTable thead tr th {
    height: 28px;
    font-size: 14px;
    font-family: tahoma, helvetica, arial, sans-serif;
    padding-left: 5px;
}

.myDataTable thead tr th img {
    padding-right: 5px;
    padding-top: 1px;
}

.myDataTable thead tr td {
    height: 15px;
    font-size: 11px;
    font-weight: bold;
    font-family: tahoma, helvetica, arial, sans-serif;
    padding-left: 5px;
}

.myDataTable tbody {
    background: #f2f5f9;
}

.myDataTable tbody tr:nth-child(even) td,tbody tr.even td {
    background: #e2ebf4;
    font-size: 12px;
    padding-left: 5px;
    height: 14px;
}

.myDataTable tbody tr:nth-child(odd) td,tbody tr.odd td {
    background: #f7faff;
    font-size: 12px;
    padding-left: 5px;
    height: 14px;
}

.myDataTable tbody tr:hover td {
    background-color: #e7e7e7;
}

.myDataTable tbody tr td {
    height: 14px;
    padding-left: 5px;
    font-size: 12px;
}

.myDataTable tbody tr td a {
    color: black;
    text-decoration: none;
    font-size: 12px;
    display: block;
}

.myDataTable thead tr th a {
    color: black;
    text-decoration: none;
    font-size: 12px;
    display: inline;
}

你的表結構應該是：

<table class="myDataTable">
 <thead>
  <tr>
   <th>Heading 1</th>
   <th>Heading 2</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td><a href="#">Data    1 </a></td>
   <td><a href="#">Data    2 </a></td>
  </tr>
 </tbody>
</table>

Answer 12

如果您的目標瀏覽器都支持CSS表格顯示樣式 ，您可以使用Javascript將<a>標簽中的每一行換行設置為<tbody> 。

這里有一些使用jQuery實現它的JS代碼： （jsfiddle）

$(function() {
  $('.table-linked').each(function() {
    var table, tbody;
    table = this;
    tbody = $('tbody', this);
    tbody.children().each(function() {
      var href, row;
      row = $(this);
      href = row.attr('data-href');
      $('<a href="' + href + '" style="display: table-row-group" />').append(row).appendTo(table);
    });
    tbody.remove();
  });
});

此代碼將轉換如下所示的表：

<table class="table-linked">
    <tbody>
        <tr data-href="/a"><td>a</td><td>1</td></tr>
        <tr data-href="/b"><td>b</td><td>2</td></tr>
    </tbody>
</table>

在瀏覽器中進入這個DOM結構：

<table>
    <a href="/a" style="display: table-row-group">
        <tr><td>a</td><td>1</td></tr>
    </a>
    <a href="/b" style="display: table-row-group">
        <tr><td>b</td><td>1</td></tr>
    </a>
</table>

瀏覽器似乎無法將此結構解析為HTML代碼（不用說它不會驗證），它需要使用JS構造

Answer 13

Marko Dugonjic在他的博客maratz.com中解釋了如何使用Javascript檢測表行索引。 在他的示例中，當您將鼠標懸停在一行中的任何單元格上時，整個行都會突出顯示。

參見示例， http：//webdesign.maratz.com/lab/row_index/

和他的文章， http：//www.maratz.com/blog/archives/2005/05/18/detect-table-row-index-with-javascript/

通過更改，您可以通過執行onclick操作進一步調整此選項。

Answer 14

如果您已經依賴javascript進行點擊，那么您還可以使用javascript在狀態區域中顯示網址，更改光標或執行其他操作以使其看起來更像鏈接。 當然，瀏覽器可能會忽略設置狀態區域的代碼。