Tablo satırımı bir şeye bağlantı olarak ayarlayamıyorum. Sadece css ve html kullanabilirim. Div'den başka bir şeye kadar farklı şeyler denedim, ancak yine de çalışmasını sağlayamıyorum.

Bunu yapmanın iki yolu var:

• JavaScript kullanarak:

  <tr onclick="document.location = 'links.html';">

• Çapa kullanma:

  <tr><td><a href="">text</a></td><td><a href="">text</a></td></tr>

İkinci çalışmayı kullanarak yaptım:

table tr td a {
    display:block;
    height:100%;
    width:100%;
}

Sütunlar arasındaki ölü boşluktan kurtulmak için:

table tr td {
    padding-left: 0;
    padding-right: 0;
}

İşte ikinci örneğin basit bir demosu: DEMO

Kendime özel bir jquery işlevi yaptım:

HTML

<tr data-href="site.com/whatever">

jQuery

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

Benim için kolay ve mükemmel. Umarım size yardımcı olur.

(OP'nin yalnızca CSS ve HTML istediğini biliyorum, ancak jQuery'yi düşünün)

Düzenle

Data attr kullanarak Matt Kantor ile anlaştı. Yukarıdaki cevap düzenlendi

Destekleyen bir tarayıcı kullanıyorsanız, bunu <a>bir tablo satırına dönüştürmek için CSS'yi kullanabilirsiniz :

.table-row { display: table-row; }
.table-cell { display: table-cell; }

<div style="display: table;">
    <a href="..." class="table-row">
        <span class="table-cell">This is a TD... ish...</span>
    </a>
</div>

Tabii ki, blok öğelerini <a>. Ayrıca bunu normal bir<table>

Eğer varsa zorunda bir tablo kullanmak, her tablo hücresine bağlantı koyabilirsiniz:

<table>
  <tbody>
    <tr>
      <td><a href="person1.html">John Smith</a></td>
      <td><a href="person1.html">123 Fake St</a></td>
      <td><a href="person1.html">90210</a></td>
    </tr>
    <tr>
      <td><a href="person2.html">Peter Nguyen</a></td>
      <td><a href="person2.html">456 Elm Ave</a></td>
      <td><a href="person2.html">90210</a></td>
    </tr>
  </tbody>
</table>

Ve bağlantıların tüm hücreleri doldurmasını sağlayın:

table tbody tr td a {
  display: block;
  width: 100%;
  height: 100%;
}

<div>Tablo yerine s kullanabiliyorsanız , HTML'niz çok daha basit olabilir ve tablo hücreleri arasındaki bağlantılarda "boşluklar" oluşmaz:

<div class="myTable">
  <a href="person1.html">
    <span>John Smith</span>
    <span>123 Fake St</span>
    <span>90210</span>
  </a>
  <a href="person2.html">
    <span>Peter Nguyen</span>
    <span>456 Elm Ave</span>
    <span>90210</span>
  </a>
</div>

<div>Yöntemle birlikte gelen CSS şu şekildedir :

.myTable {
  display: table;
}
.myTable a {
  display: table-row;
}
.myTable a span {
  display: table-cell;
  padding: 2px; /* this line not really needed */
}

Her zamanki yöntem, bazı JavaScript'lerin onClicközniteliğine atamaktır .TR öğenin .

JavaScript kullanamıyorsanız, bir numara kullanmanız gerekir:

1. TDAynı satırı aynı satırın her birine ekleyin (bağlantı, hücredeki en dış öğe olmalıdır).

2. Bağlantıları blok öğelerine dönüştürün: a { display: block; width: 100%; height: 100%; }

İkincisi, bağlantıyı tüm hücreyi doldurmaya zorlar, böylece herhangi bir yere tıklamak bağlantıyı çağırır.

Bir <td>öğeyi bir <a>etiketle sarmalayamazsınız , ancak onclickbir işlevi çağırmak için olayı kullanarak benzer işlevselliği elde edebilirsiniz . Burada bir örnek bulunur , bu fonksiyona benzer bir şey:

<script type="text/javascript">
function DoNav(url)
{
   document.location.href = url;
}
</script>

Ve tablonuza şu şekilde ekleyin:

<tr onclick="DoNav('http://stackoverflow.com/')"><td></td></tr>

Sirwilliam tarafından gönderilen yanıt bana en uygun. Javascript'i Ctrl + LeftClick kısayol tuşu desteğiyle geliştirdim (sayfayı yeni sekmede açar). Olay ctrlKey, PC'ler metaKeytarafından, Mac tarafından kullanılır .

Javascript

$('body').on('mousedown', 'tr[url]', function(e){
    var click = e.which;
    var url = $(this).attr('url');
    if(url){
        if(click == 2 || (click == 1 && (e.ctrlKey || e.metaKey))){
            window.open(url, '_blank');
            window.focus();
        }
        else if(click == 1){
            window.location.href = url;
        }
        return true;
    }
});

Misal

http://jsfiddle.net/vlastislavnovak/oaqo2kgs/

Bu sorunun zaten yanıtlandığını biliyorum ama yine de bu sayfadaki herhangi bir çözümü beğenmiyorum. JQuery kullanan kişiler için, tablo satırına neredeyse aynı davranışı vermenizi sağlayan son bir çözüm yaptım.<a> etiketle .

Bu benim çözümüm:

jQuery Bunu örneğin standart bir javascript dosyasına ekleyebilirsiniz.

$('body').on('mousedown', 'tr[url]', function(e){
    var click = e.which;
    var url = $(this).attr('url');
    if(url){
        if(click == 1){
            window.location.href = url;
        }
        else if(click == 2){
            window.open(url, '_blank');
            window.focus();
        }
        return true;
    }
});

HTML Artık bunu HTML'nizdeki herhangi bir <tr>öğede kullanabilirsiniz

<tr url="example.com">
    <td>value</td>
    <td>value</td>
    <td>value</td>
<tr>

Simüle etmek istediğimde <tr> bağlantı ile ancak html standartlarına uyduğumda, bunu yapıyorum.

HTML:

<table>
    <tr class="trLink">
        <td>
            <a href="#">Something</a>
        </td>
    </tr>
</table>

CSS:

tr.trLink {
    cursor: pointer;
}
tr.trLink:hover {
   /*TR-HOVER-STYLES*/
}

tr.trLink a{
    display: block;
    height: 100%;
    width: 100%;
}
tr.trLink:hover a{
   /*LINK-HOVER-STYLES*/
}

Bu şekilde, birisi faresini bir TR'ye götürdüğünde, tüm satır (ve bu bağlantılar) üzerine gelme stilini alır ve birden fazla bağlantı olduğunu göremez.

Umut birisine yardım edebilir.

keman BURADA

Bu, sizi tr'deki bağlantıyı kopyalamak zorunda kalmadan kurtarır - sadece ilk a'dan çıkarmanız yeterlidir.

$(".link-first-found").click(function() {
 var href;
href = $(this).find("a").attr("href");
if (href !== "") {
return document.location = href;
}
});

//Style
  .trlink {
    color:blue;
  }
  .trlink:hover {
    color:red;
  }

<tr class="trlink" onclick="function to navigate to a page goes here">
<td>linktext</td>
</tr>

Bu çizgide bir şeyler olabilir mi? JS kullanmasına rağmen, ancak bu bir satırı (tr) tıklanabilir hale getirmenin tek yolu.

Tüm hücreyi dolduran bir bağlantı etiketine sahip tek bir hücreniz yoksa.

Ve sonra, zaten bir masa kullanmamalısın.

Bu konuyu ve bazılarını okuduktan sonra javascript'te aşağıdaki çözümü buldum:

function trs_makelinks(trs) {
    for (var i = 0; i < trs.length; ++i) {
        if (trs[i].getAttribute("href") != undefined) {
            var tr = trs[i];
            tr.onclick = function () { window.location.href = this.getAttribute("href"); };
            tr.onkeydown = function (e) {
                var e = e || window.event;
                if ((e.keyCode === 13) || (e.keyCode === 32)) {
                    e.preventDefault ? e.preventDefault() : (e.returnValue = false);
                    this.click();
                }
            };
            tr.role = "button";
            tr.tabIndex = 0;
            tr.style.cursor = "pointer";
        }
    }
}

/* It could be adapted for other tags */
trs_makelinks(document.getElementsByTagName("tr"));
trs_makelinks(document.getElementsByTagName("td"));
trs_makelinks(document.getElementsByTagName("th"));

O koymak kullanmak için href tr / td / inci sizin gibi tıklanabilir olmasını arzu ettiklerini: <tr href="http://stackoverflow.com">. Ve yukarıdaki komut dosyasının, tr öğesi oluşturulduktan sonra (yerleştirilerek veya olay işleyicileri kullanılarak) yürütüldüğünden emin olun.

Olumsuz yanı, TR'lerin div'lerle olduğu gibi tamamen bağlantı olarak davranmasına neden display: table;olmayacak ve klavye ile seçilebilir veya durum metnine sahip olmayacak. Düzenleme: Onkeydown, role ve tabIndex'i ayarlayarak klavye gezintisini çalıştırdım, sadece fareye ihtiyaç duyulursa bu kısmı kaldırabilirsiniz. Yine de fareyle üzerine gelindiğinde URL'yi durum çubuğunda göstermezler.

"Tr [href]" CSS seçici ile özellikle bağlantı TR'lerini biçimlendirebilirsiniz.

Başka bir yolum var. Özellikle jQuery kullanarak veri göndermeniz gerekiyorsa

$(document).on('click', '#tablename tbody tr', function()
{   
    var test="something";
    $.post("ajax/setvariable.php", {ID: this.id, TEST:test}, function(data){        
        window.location.href = "http://somepage";
    });
});

Değişken ayarla, OTURUMLAR'da, okuyacağınız ve bunlara göre hareket edeceğiniz sayfanın değişkenlerini ayarlar.

Doğrudan bir pencere konumuna göndermenin bir yolunu gerçekten çok isterdim, ancak bunun mümkün olduğunu sanmıyorum.

Bunun için teşekkürler. Fareyle üzerine gelme simgesini, aşağıdaki gibi satıra bir CSS sınıfı atayarak değiştirebilirsiniz:

<tr class="pointer" onclick="document.location = 'links.html';">

ve CSS şöyle görünür:

<style>
    .pointer { cursor: pointer; }
</style>

Satıra bir A etiketi ekleyebilir misiniz?

<tr><td>
<a href="./link.htm"></a>
</td></tr>

Sorduğun bu mu?