संपूर्ण तालिका पंक्ति लिंक?

Question

मुझे पता है कि सीएसएस के साथ एक संपूर्ण टेबल सेल को लिंक करना संभव है।

.tableClass td a{ 
    display: block; 
} 

क्या संपूर्ण तालिका पंक्ति में एक लिंक लागू करने का कोई तरीका है?

Answer 1

मैं Matti से सहमत (यह और "क्लिक" यह पहली कड़ी के लिए लग रहा है) लिंक के साथ सभी तालिका पंक्तियों बनाने के लिए एक सरल jQuery का टुकड़ा है। कुछ सरल जावास्क्रिप्ट के साथ करना आसान होगा। एक त्वरित jQuery उदाहरण कुछ इस तरह होगा:

<tr> 
    <td><a href="http://www.example.com/">example</a></td> 
    <td>another cell</td> 
    <td>one more</td> 
</tr> 

और

$('tr').click(function() { 
    window.location = $(this).find('a').attr('href'); 
}).hover(function() { 
    $(this).toggleClass('hover'); 
}); 

फिर अपने सीएसएस में

tr.hover { 
    cursor: pointer; 
    /* whatever other hover styles you want */ 
} 

Answer 2

दुर्भाग्य से, नहीं। एचटीएमएल और सीएसएस के साथ नहीं। एक लिंक बनाने के लिए आपको a तत्व की आवश्यकता है, और आप एक संपूर्ण तालिका पंक्ति को एक में लपेट नहीं सकते हैं।

निकटतम आप प्राप्त कर सकते हैं प्रत्येक तालिका सेल को जोड़ना। व्यक्तिगत रूप से मैं बस एक सेल को लिंक करता हूं और शेष क्लिक करने योग्य बनाने के लिए जावास्क्रिप्ट का उपयोग करता हूं। वैसे भी कम से कम एक सेल होना अच्छा लगता है जो स्पष्ट रूप से एक लिंक, रेखांकित और सभी की तरह दिखता है।

यहाँ क्लिक करने योग्य

$("table").on("click", "tr", function(e) { 
    if ($(e.target).is("a,input")) // anything else you don't want to trigger the click 
     return; 

    location.href = $(this).find("a").attr("href"); 
}); 

Answer 3

उदाहरण: http://xxjjnn.com/linktablerow.html

लिंक पूरी पंक्ति:

<table> 
    <tr onclick="location.href='SomeWherrrreOverTheWebsiiiite.html'">** 
    <td> ...content... </td> 
    <td> ...content... </td> 
    ... 
    </tr> 
</table> 

Iff आप तो पूरी पंक्ति के लिए माउसओवर पर प्रकाश डाला करने के लिए, चाहते हैं:

<table class="nogap"> 
    <tr class="lovelyrow" onclick="location.href='SomeWherrrreOverTheWebsiiiite.html'">** 
    ... 
    </tr> 
</table> 

सीएसएस के लिए निम्नलिखित की तरह कुछ के साथ

, जो तालिका के बीच की खाई को हटा देगा कोशिकाओं और हॉवर पर पृष्ठभूमि बदलने के लिए: Iff आप रेल 3.0.9 का उपयोग कर रहे तो आपको पता चल सकता

tr.lovelyrow{ 
    background-color: hsl(0,0%,90%); 
} 

tr.lovelyrow:hover{ 
    background-color: hsl(0,0%,40%); 
    cursor: pointer; 
} 

table.nogap{ 
    border-collapse: collapse; 
} 

इस उदाहरण उपयोगी कोड:

सागर में कई मछली है, मछली कई तराजू है, यहाँ एप्लिकेशन/देखें/मछली का स्निपेट है/index.erb

<table> 
<% @fishies.each do |fish| %> 
    <tr onclick="location.href='<%= sea_fish_scales_path(@sea, fish) %>'"> 
    <td><%= fish.title %></td> 
    </tr> 
<% end %> 
</table> 

@fishies और @sea साथ

अनुप्रयोग में परिभाषित कर रहे हैं /controllers/seas_controller.rb

Answer 4

मुझे लगता है कि सबसे सरल समाधान सैन्स जावास्क्रिप्ट है और बस प्रत्येक सेल में लिंक डाल रहा है (बशर्ते आपके पास अपनी कोशिकाओं के बीच भारी गलियां न हों या वास्तव में सीमा रेखाएं न हों)। अपने सीएसएस है:

.tableClass td a{ 
    display: block; 
} 

और फिर सेल प्रति एक लिंक जोड़ने:

<table class="tableClass"> 
    <tr> 
     <td><a href="#link">Link name</a></td> 
     <td><a href="#link">Link description</a></td> 
     <td><a href="#link">Link somthing else</a></td> 
    </tr> 
</table> 

उबाऊ लेकिन साफ।

Answer 5

::before छद्म तत्व का उपयोग करें। इस तरह से आपको केवल जावास्क्रिप्ट से निपटने या प्रत्येक सेल के लिए लिंक बनाने की आवश्यकता नहीं है। निम्नलिखित table संरचना

<table> 
    <tr> 
    <td><a href="http://domain.tld" class="rowlink">Cell</a></td> 
    <td>Cell</td> 
    <td>Cell</td> 
    </tr> 
</table> 

सब हम क्या करना है का उपयोग करते हुए एक ब्लॉक तत्व इस मामले में वांछित लिंक (.rowlink) पर ::before का उपयोग कर तालिका के पूरे चौड़ाई फैले पैदा करते हैं।

table { 
    position: relative; 
} 

.rowlink::before { 
    content: ""; 
    display: block; 
    position: absolute; 
    left: 0; 
    width: 100%; 
    height: 1.5em; /* don't forget to set the height! */ 
} 

demo

::before डेमो में लाल रंग में हाइलाइट किया जाता है ताकि आप देख सकते हैं कि यह क्या कर रहा है।

Answer 6

यह भी निर्भर करता है कि आपको तालिका तत्व का उपयोग करने की आवश्यकता है या नहीं। आप सीएसएस का उपयोग कर एक मेज की नकल और एक एक तत्व पंक्ति बना सकते हैं

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

सीएसएस:

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

Answer 7

पूरी पंक्ति लिंक करने के लिए, आप अपने पंक्ति है, जो <tr> तत्व है पर onclick समारोह परिभाषित करने की जरूरत और वेब में एक सामान्य क्लिक हाथ करने के लिए माउस सूचक बनाने के लिए tr तत्व के लिए सीएसएस में एक माउस hover को परिभाषित:

तालिका में:

<tr onclick="location.href='http://www.google.com'"> 
<td>blah</td> 
<td>blah</td> 
<td><strong>Text</strong></td> 
</tr> 

संबंधित सीएसएस में:

tr:hover { 
cursor: pointer; 
}