101

मैं अपनी तालिका पंक्ति को किसी चीज़ के लिंक के रूप में सेट नहीं कर सकता। मैं केवल css और html का उपयोग कर सकता हूं। मैंने अलग-अलग चीजों में पंक्ति से कुछ और करने की कोशिश की, लेकिन फिर भी यह काम नहीं कर सकता।

— मैक्स फ्राइ
स्रोत

175

आपके पास ऐसा करने के दो तरीके हैं:

जावास्क्रिप्ट का उपयोग करना:

<tr onclick="document.location = 'links.html';">
एंकर का उपयोग करना:

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

मैंने दूसरा काम किया:

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

स्तंभों के बीच मृत स्थान से छुटकारा पाने के लिए:

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

यहाँ दूसरे उदाहरण का एक सरल डेमो है: DEMO

— एस्टेबन कुबेर
स्रोत

8

चूंकि ओपी ने कहा "केवल सीएसएस और एचटीएमएल" मुझे लगता है कि स्वीकार दूसरे उत्तर के लिए था। ध्यान दें कि यदि आपके पास बॉर्डर = 0 नहीं है, तो आपको टेबल सेल्स के बीच एक "मिसिंग लिंक" गैप मिलेगा।

— सिस्टम PAUSE

1

IIRC तालिका की कोशिकाओं को बस ढह जाना है, लेकिन एक सीमा हो सकती है।

— एस्टेबन कुबेर

5

<a> टैग इसके अंदर किसी भी अन्य HTML तत्वों की अनुमति नहीं देता है। फिर, हम एक पूरी तालिका पंक्ति को कैसे लिंक कर सकते हैं जिसमें अधिक तालिका डेटा है? कुछ इस तरह: <tr> <a href=""> <td> पाठ </ td> <td> ..... </a> </ tr> .. हमें यह पसंद नहीं है?

— अबिमारन कुगाथासन

4

मैं ब्लॉक के बजाय "डिस्प्ले: इनलाइन-ब्लॉक" का उपयोग करने की सलाह दूंगा। ब्लॉक डिस्प्ले के साथ, मैंने पाया कि क्रोम "ऊँचाई: 100%" को नजरअंदाज कर रहा था और वास्तव में <td> क्लिक की पूरी ऊँचाई नहीं बना पा रहा था, अगर एक ही पंक्ति में अन्य वस्तुएँ हैं जिनकी ऊँचाई अधिक है। इनलाइन-ब्लॉक बनाना उस मुद्दे को तय करता है, और संभवतः टेबल तत्वों के अंदर पाठ के साथ संबंधित समस्या भी।

— orth

2

एंकर के पास अभी भी कॉलम के बीच मृत स्थान है (Google Chrome संस्करण 40.0.2214.115 मीटर के साथ परीक्षण किया गया है)

— यूरी

55

मैंने खुद को एक कस्टम jquery फंक्शन बनाया:

एचटीएमएल

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

jQuery

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

मेरे लिए आसान और परफेक्ट। उम्मीद है कि यह आपकी मदद करता है।

(मुझे पता है कि ओपी केवल CSS और HTML चाहते हैं, लेकिन jQuery पर विचार करें)

संपादित करें

डेटा कैंटर का उपयोग करके मैट कांटोर से सहमत। ऊपर दिया गया उत्तर

— रॉन वैन डेर हाइजेन
स्रोत

यह वास्तव में बहुत सुंदर है। मुझे आश्चर्य है कि अगर यह w3c मानकों द्वारा अमान्य html माना जाता है।

— महन

14

मैं उपयोग करूँगा data-hrefया कुछ करूँगा ।

— मैट कंटर

2

404. को JSFiddle लिंक होता है

— Flox

1

कक्षा में जोड़ें <table class='tr_link' >और इसे .tr_link{cursor:pointer}सर्वश्रेष्ठ उपयोग के लिए सीएसएस में दें ।

— बागोवा

6

tr[data-href] { cursor: pointer }

— होवरिंग

27

यदि आप उस ब्राउज़र पर हैं जो इसका समर्थन करता है तो आप सीएसएस का उपयोग <a>तालिका पंक्ति में बदलने के लिए कर सकते हैं :

.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>

बेशक, आप ब्लॉक तत्वों को अंदर नहीं डालने तक सीमित हैं <a>। आप इसे नियमित रूप से नहीं मिला सकते हैं<table>

— ग्रेग
स्रोत

1

महान विचार, धन्यवाद! यह ओपेरा 8.5 / , फ़ायरफ़ॉक्स 0.8 / IE, IE8, iPhone सिम्युलेटर / सफारी / बहुत पुराना :) पर काम करने लगता है

— biziclop

1

यह वह तकनीक होनी चाहिए जिसे डेवलपर्स यह बताने की कोशिश करें कि CSS टेबल सभी वर्तमान ब्राउज़रों द्वारा समर्थित हैं: caniuse.com/#feat=css-table एकमात्र परेशानी यह है कि मैं बूटस्ट्रैप के साथ इसका उपयोग नहीं कर सकता! : '(

— shangxiao

13

यदि आपको किसी तालिका का उपयोग करना है, तो आप प्रत्येक तालिका सेल में एक लिंक डाल सकते हैं:

<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>

और लिंक पूरे सेल को भरें:

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

यदि आप <div>तालिका के बजाय s का उपयोग करने में सक्षम हैं , तो आपका HTML बहुत सरल हो सकता है, और आपको तालिका कक्षों के बीच लिंक में "अंतराल" नहीं मिलेगा:

<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>विधि के साथ चला जाता है :

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

— सिस्टम PAUSE
स्रोत

1

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

— 15:27 बजे गुलामा

12

तत्व की onClickविशेषता के लिए कुछ जावास्क्रिप्ट असाइन करने का सामान्य तरीका है TR।

यदि आप जावास्क्रिप्ट का उपयोग नहीं कर सकते हैं, तो आपको एक चाल का उपयोग करना चाहिए:

प्रत्येक TDपंक्ति में एक ही लिंक जोड़ें (लिंक सेल में सबसे बाहरी तत्व होना चाहिए)।
लिंक को ब्लॉक तत्वों में बदलें: a { display: block; width: 100%; height: 100%; }

उत्तरार्द्ध लिंक को पूरे सेल को भरने के लिए मजबूर करेगा इसलिए कहीं भी क्लिक करने से लिंक आ जाएगा।

— हारून दिगुल्ला
स्रोत

7

आप <td>एक <a>टैग के साथ एक तत्व को लपेट नहीं सकते हैं , लेकिन आप फ़ंक्शन onclickको कॉल करने के लिए इवेंट का उपयोग करके समान कार्यक्षमता को पूरा कर सकते हैं । एक उदाहरण यहाँ मिलता है , कुछ इस प्रकार है:

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

और इसे अपनी तालिका में इस तरह जोड़ें:

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

— डोनट
स्रोत

21

इस तरह के उद्देश्य के लिए onClick का उपयोग करने की समस्याओं में से एक यह है कि उपयोगकर्ता अब नए टैब में लिंक खोलने के लिए मध्य माउस बटन या नियंत्रण-क्लिक का उपयोग नहीं कर सकते हैं (जो वास्तव में हमारे लिए निराशाजनक हो सकते हैं जो इस तरह लिंक खोलने से प्यार करते हैं) । एक दूसरे पक्ष पर ध्यान दें, केवल एक साधारण कमांड करने वाले फ़ंक्शन को बनाकर चीजों को जटिल करने का कोई कारण नहीं है। यदि आप ऐसा करने जा रहे हैं, तो सीधे "on पर क्लिक करें" document.location.href = ... "।

— 12

7

सरविलियम का उत्तर मुझे सबसे अच्छा लगता है। मैंने हॉटकी Ctrl + LeftClick के लिए समर्थन के साथ जावास्क्रिप्ट में सुधार किया (नए टैब में पृष्ठ खोलता है)। मैक ctrlKeyद्वारा ईवेंट का उपयोग पीसी द्वारा किया जाता है metaKey।

जावास्क्रिप्ट

$('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;
    }
});

उदाहरण

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

— वेलस्टिस्लाव नोवाक
स्रोत

अच्छा। Ctrl + LeftClick U40

— Yuri

1

अभी भी 'राइट क्लिक -> एक नए टैब में खोलें' या 'एक नई विंडो में खोलें'

— खो रहा है

4

मुझे पता है कि यह प्रश्न पहले ही उत्तर दे दिया गया है लेकिन मुझे अभी भी इस पृष्ठ पर कोई समाधान पसंद नहीं है। JQuery का उपयोग करने वाले लोगों के लिए मैंने एक अंतिम समाधान बनाया है जो आपको तालिका पंक्ति को <a>टैग के समान व्यवहार देने में सक्षम बनाता है ।

यह मेरा समाधान है:

jQuery आप इसे उदाहरण के लिए एक मानक शामिल जावास्क्रिप्ट फ़ाइल में जोड़ सकते हैं

$('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 अब आप <tr>अपने HTML के अंदर किसी भी तत्व पर इसका उपयोग कर सकते हैं

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

— botenvouwer
स्रोत

तो शुद्ध जेएस के करीब।

document.querySelector('tr[url]').addEventListener("mousedown", function(e){     var click = e.which;     var url = this.getAttribute("url");     if(url){         if(click == 1){             window.location.href = url;         }         else if(click == 2){             window.open(url, '_blank');             window.focus();         }         return true;     } });

— रेमन बकर

1

2014 में वेनिला जेएस में उपलब्ध नहीं था , आपने ब्रैट को खराब कर दिया; पी।

— बोटनवॉवर

2

जब मैं <tr>एक लिंक के साथ अनुकरण करना चाहता हूं, लेकिन html मानकों का सम्मान करते हुए, मैं ऐसा करता हूं।

HTML:

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

सीएसएस:

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*/
}

इस तरह, जब कोई टीआर पर अपने माउस के साथ जाता है, तो सभी पंक्ति (और इस लिंक) को हॉवर शैली मिलती है और वह यह नहीं देख सकता है कि कई लिंक हैं।

आशा किसी की मदद कर सकती है।

इधर उधर करना

— sara_thepot
स्रोत

1

यह आपको tr में लिंक को डुप्लिकेट करने के लिए बचाता है - बस इसे पहले से बाहर मछली।

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

— मर्जी
स्रोत

0

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

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

इन पंक्तियों के साथ शायद कुछ? हालाँकि यह JS का उपयोग करता है, लेकिन यह केवल एक पंक्ति (tr) क्लिक करने योग्य है।

जब तक आपके पास एक एंकर टैग के साथ एक एकल कक्ष नहीं है जो पूरे सेल को भरता है।

और फिर, आपको किसी भी तरह एक तालिका का उपयोग नहीं करना चाहिए।

— CaffGeek
स्रोत

0

इस सूत्र और कुछ अन्य को पढ़ने के बाद मैं जावास्क्रिप्ट में निम्नलिखित समाधान के साथ आया:

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"));

इसका उपयोग करने के लिए href को tr / td / th में रखें जिसे आप क्लिक करने योग्य होने की इच्छा रखते हैं जैसे <tr href="http://stackoverflow.com">:। और सुनिश्चित करें कि tr तत्व बनने के बाद ऊपर की स्क्रिप्ट निष्पादित की गई है (इसके स्थान या घटना संचालकों का उपयोग करके)।

नकारात्मक पक्ष यह है कि टीआरएस पूरी तरह से व्यवहार नहीं करेगा जैसा कि डिव के साथ लिंक के रूप में होता है display: table;, और वे कीबोर्ड-चयन या स्टेटस टेक्स्ट नहीं होंगे। संपादित करें: मैंने onkeydown, भूमिका और tabIndex सेट करके कीबोर्ड नेविगेशन कार्य किया है, आप केवल माउस की आवश्यकता होने पर उस हिस्से को हटा सकते हैं। हालांकि, होवरिंग पर वे स्टेटसबार में URL नहीं दिखाएंगे।

आप विशेष रूप से लिंक TR को "tr [href]" CSS चयनकर्ता के साथ स्टाइल कर सकते हैं।

— Netman
स्रोत

0

मेरे पास दूसरा रास्ता है। खासकर यदि आपको jQuery का उपयोग करके डेटा पोस्ट करने की आवश्यकता है

$(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";
    });
});

चर सेट करें चर को उन सत्रों में सेट करें, जिस पृष्ठ पर आप पढ़ने जा रहे हैं और जिस पर कार्य कर सकते हैं।

मैं वास्तव में एक खिड़की के स्थान पर सीधे पोस्ट करने का एक तरीका पसंद करूंगा, लेकिन मुझे नहीं लगता कि यह संभव है।

— थॉमस विलियम्स
स्रोत

0

इसके लिए धन्यवाद। आप पंक्ति में CSS वर्ग निर्दिष्ट करके होवर आइकन को बदल सकते हैं:

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

और सीएसएस जैसा दिखता है:

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

— tkrn
स्रोत

-2

क्या आप पंक्ति में A टैग जोड़ सकते हैं?

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

क्या यह आप पूछ रहे हैं?

— निकोलस वेब
स्रोत

1

नहीं, मुझे सभी पंक्ति-क्षेत्र के लिए क्लिक करने की आवश्यकता है।

— मैक्स फ्राई

html - एक पंक्ति की तरह तालिका पंक्ति

एचटीएमएल

jQuery

संपादित करें