Bootstrap kullanıyorum ve aşağıdakiler çalışmıyor:

<tbody>
    <a href="#">
        <tr>
            <td>Blah Blah</td>
            <td>1234567</td>
            <td>£158,000</td>
        </tr>
    </a>
</tbody>

Yazarın notu I:

Lütfen aşağıdaki diğer cevaplara, özellikle jquery kullanmayanlara bakın.

Yazarın notu II:

2020'de gelecek nesiller için korunmuştu ama kesinlikle yanlış bir yaklaşım. (2017'de bile deyimsel değildi)

Orijinal Yanıt

Bootstrap kullanıyorsunuz, yani jQuery: ^) kullandığınız için bunu yapmanın bir yolu:

<tbody>
    <tr class='clickable-row' data-href='url://'>
        <td>Blah Blah</td> <td>1234567</td> <td>£158,000</td>
    </tr>
</tbody>


jQuery(document).ready(function($) {
    $(".clickable-row").click(function() {
        window.location = $(this).data("href");
    });
});

Tabii ki href kullanmak veya konum değiştirmek zorunda değilsiniz, tıklama işleyicisi işlevinde istediğinizi yapabilirsiniz. Okuma jQueryve işleyicilerin nasıl yazılacağı;

ID üzerinden bir sınıf kullanmanın avantajı , çözümü birden çok satıra uygulayabilmenizdir:

<tbody>
    <tr class='clickable-row' data-href='url://link-for-first-row/'>
        <td>Blah Blah</td> <td>1234567</td> <td>£158,000</td>
    </tr>
    <tr class='clickable-row' data-href='url://some-other-link/'>
        <td>More money</td> <td>1234567</td> <td>£800,000</td>
    </tr>
</tbody>

ve kod tabanınız değişmez. Aynı işleyici tüm satırlarla ilgilenir.

Başka seçenek

Bootstrap jQuery geri aramalarını şu şekilde kullanabilirsiniz ( document.readygeri aramada):

$("#container").on('click-row.bs.table', function (e, row, $element) {
    window.location = $element.data('href');
});

Bu, tablo sıralamasında (diğer seçenekle gerçekleşir) sıfırlanmama avantajına sahiptir.

Not

Gönderildiği window.document.locationiçin window.locationbunun yerine eski (veya en azından kullanımdan kaldırıldı) kullanımı .

Bunu yapamazsın. Geçersiz HTML. <a>A <tbody>ve a arasına giremezsiniz <tr>. Bunun yerine şunu deneyin:

<tr onclick="window.location='#';">
        ...
     </tr>

işaretçi görünümü için stil ekle

[data-href] { cursor: pointer; }

Buna kadar çalıştığınızda, tıklama işleyiciyi HTML dışında atamak için JavaScript'i kullanmak istersiniz.

Her birinin içine bir çapa ekleyebilirsiniz <td>, şöyle:

<tr>
  <td><a href="#">Blah Blah</a></td>
  <td><a href="#">1234567</a></td>
  <td><a href="#">more text</a></td>
</tr>

Daha sonra display:block;, tüm satırı tıklanabilir hale getirmek için çapalarda kullanabilirsiniz.

tr:hover { 
   background: red; 
}
td a { 
   display: block; 
   border: 1px solid black;
   padding: 16px; 
}

Örnek jsFiddle burada.

Bu muhtemelen JavaScript'e başvurmadığınız sürece alacağınız kadar optimumdur.

Bağlantılı bir tablo satırı mümkündür, ancak standart <table>öğelerle değil. display: tableStil özelliklerini kullanarak yapabilirsiniz . Burada ve burada gösterilecek bazı kemanlar var.

Bu kod hile yapmalıdır:

.table {
  display: table;
}

.row {
  display: table-row;
}

.cell {
  display: table-cell;
  padding: 10px;
}

.row:hover {
  background-color: #cccccc;
}

.cell:hover {
  background-color: #e5e5e5;
}

<link href="https://stackpath.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css" rel="stylesheet" type="text/css" />

<div role="grid" class="table">
  <div role="row" class="row">
    <div role="gridcell" class="cell">
      1.1
    </div>
    <div role="gridcell" class="cell">
      1.2
    </div>
    <div role="gridcell" class="cell">
      1.3
    </div>
  </div>

  <a role="row" class="row" href="#">
    <div role="gridcell" class="cell">
      2.1
    </div>
    <div role="gridcell" class="cell">
      2.2
    </div>
    <div role="gridcell" class="cell">
      2.3
    </div>
  </a>
</div>

Standarttan beri uygun erişilebilirliği sağlamak için ARIA rollerine ihtiyaç olduğunu unutmayın. <table> elemanlar kullanılmadığından . role="columnheader"Varsa, gibi ek roller eklemeniz gerekebilir . Daha fazla bilgiyi burada bulabilirsiniz.

Aşağıdaki standart Bootstrap 4.3+ kullanılarak elde edildi - jQuery veya ekstra css sınıflarına gerek yok!

Anahtar, stretched-linkhücre içindeki metin üzerinde kullanmak ve <tr>bir içeren blok olarak tanımlamaktır .

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>

<table class="table table-hover">
  <tbody>
    <tr style="transform: rotate(0);">
    <th scope="row"><a href="#" class="stretched-link">1</a></th>
      <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Jacob</td>
      <td>Thornton</td>
      <td>@fat</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td>Larry</td>
      <td>the Bird</td>
      <td>@twitter</td>
    </tr>
  </tbody>
</table>

İçeren bloğu farklı şekillerde tanımlayabilirsiniz, örneğin transform hiçbir değere (yukarıdaki örnekte olduğu gibi).

Daha fazla bilgi için buraya okumak var Bootstrap dokümantasyon için stretched-link.

Çok daha esnek bir çözüm, data-href özelliğiyle her şeyi hedeflemektir. Bu, kodu farklı yerlerde kolayca yeniden kullanabileceğinizdi.

<tbody>
    <tr data-href="https://google.com">
        <td>Col 1</td>
        <td>Col 2</td>
    </tr>
</tbody>

Sonra jQuery sadece bu özelliği ile herhangi bir öğeyi hedefleyin:

jQuery(document).ready(function($) {
    $('*[data-href]').on('click', function() {
        window.location = $(this).data("href");
    });
});

Ve css'inizi şekillendirmeyi unutmayın:

[data-href] {
    cursor: pointer;
}

Artık herhangi bir öğeye data-href özniteliğini ekleyebilirsiniz ve çalışacaktır. Bunun gibi parçacıklar yazdığımda esnek olmalarını seviyorum. Varsa, buna vanilya js çözümü eklemekten çekinmeyin.

Bu önyükleme bileşenini kullanabilirsiniz:

http://jasny.github.io/bootstrap/javascript/#rowlink

Jasny Bootstrap

En sevdiğiniz ön uç çerçeveniz için eksik bileşenler.

<table class="table table-striped table-bordered table-hover">
  <thead>
    <tr><th>Name</th><th>Description</th><th>Actions</th></tr>
  </thead>
  <tbody data-link="row" class="rowlink">
    <tr><td><a href="#inputmask">Input mask</a></td><td>Input masks can be used to force the user to enter data conform a specific format.</td><td class="rowlink-skip"><a href="#">Action</a></td></tr>
    <tr><td><a href="http://www.jasny.net/" target="_blank">jasny.net</a></td><td>Shared knowledge of Arnold Daniels aka Jasny.</td><td class="rowlink-skip"><a href="#">Action</a></td></tr>
    <tr><td><a href="#rowlinkModal" data-toggle="modal">Launch modal</a></td><td>Toggle a modal via JavaScript by clicking this row.</td><td class="rowlink-skip"><a href="#">Action</a></td></tr>
  </tbody>
</table>

kullanım

Veri özellikleri üzerinden

Bir veya öğeye sınıf .rowlinkve nitelik ekleyin . Diğer seçenekler veriye adını ekleme için olduğu gibi bir hücreye ekleyerek dışlanabilir için sınıf .data-link="row"<table><tbody>data-target="a.mainlink".rowlink-skip<td>

JavaScript ile

Giriş maskesini javascript ile arayın:

$('tbody.rowlink').rowlink()

İçinde <a>etiketle teknik olarak yapmanın güzel bir yolu var <tr>, bu da semantik olarak yanlış olabilir (size bir tarayıcı uyarısı verebilir), ancak JavaScript/jQuerygerekli olmadan çalışacaktır :

<!-- HTML -->
<tbody>
  <tr class="bs-table-row">
     <td>Blah Blah</td>
     <td>1234567</td>
     <td>£158,000</td>
     <a class="bs-row-link" href="/your-link-here"></a>
  </tr>
</tbody>

/* CSS */
.bs-table-row {
  position: 'relative';
}

.bs-row-link {
  position: 'absolute';
  left: 0;
  height: '36px'; // or different row height based on your requirements
  width: '100%';
  cursor: 'pointer';
}

Not: Buradaki hilenin <a>etiketi son öğe olarak koymak olduğuna dikkat edin , aksi takdirde ilk <td>hücrenin alanını almaya çalışacaktır .

PPS: Artık tüm satırınız tıklanabilir olacak ve bu bağlantıyı yeni sekmede de açmak için kullanabilirsiniz (Ctrl / CMD + tıklama)

Tr'de onclick javascript yöntemini kullanabilir ve tıklanabilir hale getirebilirsiniz, ayrıca bazı ayrıntılar nedeniyle bağlantınızı oluşturmanız gerekirse, javascript'te bir işlev bildirebilir ve bazı değerleri ileterek onclick'de çağırabilirsiniz.

İşte tablo satırlarının üzerine şeffaf bir A öğesi koyarak bir yol. Avantajları:

• gerçek bir bağlantı öğesidir: fareyle üzerine geldiğinde işaretçi değişir, durum çubuğunda hedef bağlantıyı gösterir, klavyede gezinebilir, yeni sekmede veya pencerede açılabilir, URL kopyalanabilir, vb.
• tablo, bağlantı eklenmeden aynı görünüyor
• tablo kodunda değişiklik yok

Dezavantajları:

• A öğesinin boyutu bir komut dosyasında, hem oluşturma sırasında hem de kapsadığı satırın boyutundaki herhangi bir değişiklikten sonra ayarlanmalıdır (aksi takdirde, tablo boyutu da ayarlanmışsa, yine de JavaScript olmadan yapılabilir. HTML veya CSS'de)

Tablo şu şekilde kalır:

<table id="tab1">
<tbody>
        <tr>
            <td>Blah Blah</td>
            <td>1234567</td>
            <td>£158,000</td>
        </tr>
</tbody>
</table>

Her bir ilk sütuna bir A öğesi ekleyerek ve gerekli özellikleri ayarlayarak bağlantıları (her satır için) jQuery JavaScript aracılığıyla ekleyin:

// v1, fixed for IE and Chrome
// v0, worked on Firefox only
// width needed for adjusting the width of the A element
var mywidth=$('#tab1').width();

$('#tab1 tbody>tr>td:nth-child(1)').each(function(index){
    $(this).css('position',  'relative');// debug: .css('background-color', '#f11');
    // insert the <A> element
    var myA=$('<A>');
    $(this).append(myA);
    var myheight=$(this).height();

    myA.css({//"border":'1px solid #2dd', border for debug only
            'display': 'block',
            'left': '0',
            'top': '0',
            'position':  'absolute'
        })
        .attr('href','the link here')
        .width(mywidth)
        .height(myheight)
        ;
    });

Çok sayıda dolgu ve kenar boşluğu kullanılıyorsa, genişlik ve yükseklik ayarı zor olabilir, ancak genel olarak birkaç piksel kapalı bile önemli olmamalıdır.

Canlı demo burada: http://jsfiddle.net/qo0dx0oo/ (Firefox'ta çalışıyor, ancak IE veya Chrome'da çalışmıyor, bağlantı yanlış yerleştirilmiş)

Chrome ve IE için düzeltildi (hala FF'de de çalışıyor): http://jsfiddle.net/qo0dx0oo/2/

Düğme rolünü bir tablo satırına ekleyebilirsiniz ve Bootstrap imleci herhangi bir css değişikliği yapmadan değiştirecektir. Bu rolü herhangi bir satırı çok az kodla tıklanabilir hale getirmenin bir yolu olarak kullanmaya karar verdim.

Html

<table class="table table-striped table-hover">
     <tbody>
          <tr role="button" data-href="#">
               <td>Cell 1</td>
               <td>Cell 2</td>
               <td>Cell 3</td>
          </tr>
     </tbody>
</table>

jQuery

$(function(){
     $(".table").on("click", "tr[role=\"button\"]", function (e) {
          window.location = $(this).data("href");
     });
});

Herhangi bir etikete düğme rolünü eklemek için aynı ilkeyi uygulayabilirsiniz.

Aşağıdaki kod, tüm tablonuzu tıklanabilir hale getirecektir. Bu örnekteki bağlantıların tıklatılması, bağlantıyı takip etmek yerine bağlantıyı bir uyarı iletişim kutusunda gösterir.

HTML:

Yukarıdaki örneğin arkasındaki HTML:

    <table id="example">
    <tr>
     <th>&nbsp;</th>
     <th>Name</th>
     <th>Description</th>
     <th>Price</th>
   </tr>
   <tr>
     <td><a href="apples">Edit</a></td>
     <td>Apples</td>
     <td>Blah blah blah blah</td>
     <td>10.23</td>
   </tr>
    <tr>
     <td><a href="bananas">Edit</a></td>
     <td>Bananas</td>
     <td>Blah blah blah blah</td>
     <td>11.45</td>
   </tr>
   <tr>
     <td><a href="oranges">Edit</a></td>
     <td>Oranges</td>
     <td>Blah blah blah blah</td>
     <td>12.56</td>
   </tr>
    </table>

CSS

Ve CSS:

    table#example {
    border-collapse: collapse;   
}
#example tr {
    background-color: #eee;
    border-top: 1px solid #fff;
}
#example tr:hover {
    background-color: #ccc;
}
#example th {
    background-color: #fff;
}
#example th, #example td {
    padding: 3px 5px;
}
#example td:hover {
    cursor: pointer;
}

JQuery

Ve son olarak sihri gerçekleştiren jQuery:

    $(document).ready(function() {

    $('#example tr').click(function() {
        var href = $(this).find("a").attr("href");
        if(href) {
            window.location = href;
        }
    });

});

Bir satır tıklandığında, bir çapa ait href için bir arama yapılır. Biri bulunursa, pencerenin konumu o href olarak ayarlanır.

Çok kolay bir seçenek sadece tıklamada ve daha doğru bir şekilde benim görüşüme göre kullanmaktır, çünkü bu görünüm ve denetleyiciyi ayırır ve URL'yi veya kodla daha fazlasını yapmanız gerekenleri kodlamanız gerekmez. . Açısal ng-tıklama ile de çalışır.

<table>
  <tr onclick="myFunction(this)">
    <td>Click to show rowIndex</td>
  </tr>
</table>

<script>
function myFunction(x) {
    alert("Row index is: " + x.rowIndex);
}
</script>

Burada çalışan örnek

İşte basit bir çözüm ..

<tr style='cursor: pointer; cursor: hand;' onclick="window.location='google.com';"></tr>

Bir , CSS konumları ve bazı jQuery veya JS kullanan başka bir seçenek<a> :

HTML:

<table>
<tr>
    <td>
        <span>1</span>
        <a href="#" class="rowLink"></a>
    </td>
    <td><span>2</span></td>
</tr>
</table>

CSS:

table tr td:first-child {
    position: relative;
}
a.rowLink {
    position: absolute;
    top: 0; left: 0;
    height: 30px;
}
a.rowLink:hover {
    background-color: #0679a6;
    opacity: 0.1;
}

Sonra, örneğin jQuery kullanarak bir genişlik vermeniz gerekir:

    $(function () {
        var $table = $('table');
            $links = $table.find('a.rowLink');

        $(window).resize(function () {
            $links.width($table.width());
        });

        $(window).trigger('resize');
    });

Birinin zaten aynı şeyi yazdığını biliyorum, ancak benim yolum doğru yol (div A'nın çocuğu olamaz) ve ayrıca sınıfları kullanmak daha iyidir.

CSS kullanarak bir tabloyu taklit edebilir ve bir A öğesini satır yapabilirsiniz

<div class="table" style="width:100%;">
  <a href="#" class="tr">
    <span class="td">
      cell 1
    </span>
    <span class="td">
      cell 2
    </span>
  </a>
</div>

css:

.table{display:table;}
.tr{display:table-row;}
.td{display:table-cell;}
.tr:hover{background-color:#ccc;}

onclick=""gibi newbie için kullanımı ve anlaşılması kolay olduğu için nitelik kullanmayı tercih ederim

 <tr onclick="window.location='any-page.php'">
    <td>UserName</td>
    <td>Email</td>
    <td>Address</td>
</tr>

Kabul edilen cevap harika, ancak url'yi her tr'de tekrarlamak istemiyorsanız küçük bir alternatif öneriyorum. Böylece url veya href'i tr veri yerine data-url tablosuna koyarsınız.

<table data-click data-url="href://blah">    
    <tbody>
        <tr id ="2">
            <td>Blah Blah</td> <td>1234567</td> <td>£158,000</td>
        </tr>
        <tr id ="3">
            <td>Blah Blah</td> <td>1234567</td> <td>£158,000</td>
        </tr>
    </tbody>
    </table

jQuery(document).ready(function($) {
    $('[data-click] tbody tr').click(function() {
        var url = $(this).closest('table').data("url");
        var id = $(this).closest('tr').attr('id');
        window.location = url+"?id="+id);
    });
});

Bu da iyidir çünkü her tr için tıklama verisi özelliğini eklemenize gerek yoktur. Diğer iyi bir şey, sınıfları sadece gerçekten stil için kullanılması gerektiğinden, bir tıklamayı tetiklemek için bir sınıf kullanmıyoruz.

Daha önce bahsedilmeyen bir çözüm, bir hücrede tek bir bağlantı ve bu bağlantıyı hücreler üzerinde genişletmek için bazı CSS kullanmaktır:

table {
  border: 1px solid;
  width: 400px;
  overflow: hidden;
}

tr:hover {
  background: gray;
}

tr td {
  border: 1px solid;
}

tr td:first-child {
  position:relative;
}

a:before {
  content: '';
  position:absolute;
  left: 0;
  top: 0;
  bottom: 0;
  display: block;
  width: 400px;
}

<table>
  <tr>
    <td><a href="https://google.com">First column</a></td>
    <td>Second column</td>
    <td>Third column</td>
  </tr>
  <tr>
    <td><a href="https://stackoverflow.com">First column</a></td>
    <td>Second column</td>
    <td>Third column</td>
  </tr>
</table>

<tbody>
    <tr data-href='www.bbc.co.uk'>
        <td>Blah Blah</td>
        <td>1234567</td>
        <td>£158,000</td>
    </tr>
    <tr data-href='www.google.com'>
        <td>Blah Blah</td>
        <td>1234567</td>
        <td>£158,000</td>
    </tr>
</tbody>

<script>
    jQuery(document).ready(function ($) {
        $('[data-href]').click(function () {
            window.location = $(this).data("href");
        });
    });
</script>

Buradaki ana çözüm harika olsa da, çözümüm sınıflara olan ihtiyacı ortadan kaldırıyor. Yapmanız gereken tek şey, içindeki URL ile data-href özelliğini eklemek.

Bu sorunu çözmeye çalışmak için çok zaman harcadım.

3 yaklaşım vardır:

1. JavaScript kullanın. Net dezavantajlar: yerel olarak yeni bir sekme açmak mümkün değildir ve satırın üzerine geldiğinde normal bağlantılar gibi durum çubuğunda herhangi bir gösterge olmayacaktır. Erişilebilirlik de bir sorudur.

2. Yalnızca HTML / CSS kullanın. Bu, <a>her birinin altına yuva koymak anlamına gelir <td>. Bu keman gibi basit bir yaklaşım işe yaramaz - Çünkü tıklanabilir yüzey her sütun için eşit değildir. Bu ciddi bir UX sorunudur. Ayrıca, bir <button>satıra ihtiyacınız varsa , <a>etiketi altında yerleştirmek geçerli bir HTML değildir (tarayıcılar buna uygun olsa da).

   Bu yaklaşımı uygulamanın başka 3 yolunu buldum. İlk tamam, diğer ikisi büyük değil.

   a) Bu örneğe bir göz atın :

   tr {
     height: 0;
   }
   
   td {
     height: 0;
     padding: 0;
   }
   
   /* A hack to overcome differences between Chrome and Firefox */
   @-moz-document url-prefix() {
     td {
       height: 100%;
     }
   }
   
   a {
     display: block;
     height: 100%;
   }

   Çalışır, ancak Chrome ve Firefox arasındaki tutarsızlıklar nedeniyle, farklılıkların üstesinden gelmek için tarayıcıya özgü bir kesmek gerekir. Ayrıca Chrome, hücre içeriğini her zaman en üste hizalar, bu da özellikle değişen satır yükseklikleri söz konusuysa uzun metinlerde sorunlara neden olabilir.

   b) Ayar <td>için{ display: contents; } . Bu, 2 başka soruna yol açar:

   b1. <td>Etiketi ayarlamak gibi bir başkası doğrudan etiketi biçimlendirmeye çalışırsa { width: 20px; }, bu stili bir şekilde<a> . Bunu yapmak için biraz sihire ihtiyacımız var, muhtemelen Javascript alternatifinden daha fazla sihir.

   b2. { display: contents; }hala deneysel; özellikle Edge'de desteklenmez.

   c) ayarlama <td>için { height: --some-fixed-value; }. Bu yeterince esnek değil.

3. Ciddi bir şekilde düşünmeyi önerdiğim son yaklaşım, tıklanabilir satırları hiç kullanmamaktır . Tıklanabilir satırlar harika bir UX deneyimi değildir: bunları görsel olarak tıklanabilir olarak işaretlemek kolay değildir ve satırlar içinde düğmeler gibi birden çok parça tıklanabilir olduğunda zorluklar çıkarır. Bu nedenle, uygun bir alternatif, <a>yalnızca ilk sütunda, normal bir bağlantı olarak görüntülenen bir etikete sahip olmak ve ona tüm satırda gezinme rolü vermek olabilir.

İşte başka bir yol ...

HTML:

<table>
<tbody>
       <tr class='clickableRow'>
       <td>Blah Blah</td>
       <td>1234567</td>
       <td>£158,000</td>
        </tr>
</tbody>
</table>

JQuery:

$(function() {
      $(".clickableRow").on("click", function() {
          location.href="http://google.com";

      });

});

<table>
  <tr tabindex="0" onmousedown="window.location='#';">
    <td>1</td>
    <td>2</td>
    <td>3</td>
  </tr>
</table>

# tabindex="0"Değerini url ile değiştirin , herhangi bir öğeyi odaklanabilir hale getirir

Satıra bir kimlik verebilirsiniz, ör.

<tr id="special"> ... </tr>

ve sonra jquery gibi bir şey söylemek için kullanın:

$('#special').onclick(function(){ window="http://urltolinkto.com/x/y/z";})

Neden "div" etiketleri kullanmamalıyız ...

<div>

  <a href="" >     <div>  Table row  of content here..  </div>    </a>

</div>