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

स्पष्ट रूप से आप <tr> टैग को <a> टैग से टैग नहीं कर सकते हैं और इसे एक दिन कॉल कर सकते हैं; यह अमान्य है और यह भी काम नहीं करता है। मैंने जावास्क्रिप्ट का उपयोग किया है, लेकिन फिर ब्राउज़र के साथ क्या होता है जो जावास्क्रिप्ट का समर्थन नहीं करता है? एक संपूर्ण तालिका पंक्ति <tr> को एक लिंक में बनाने का सबसे अच्छा तरीका क्या है?एक संपूर्ण तालिका पंक्ति को एक लिंक में बनाने के लिए सबसे मानक और संगत तरीका क्या है?

संपादित करें:

<table> 
    <thead> 
     <tr><th>Name</th><th>Number of widgets</th></tr> 
    </thead> 
    <tbody> 
     <tr><td>Bob Smith</td><td>Three</td></tr> 
     <tr><td>Chuck Norris</td><td>Infinity+1</td></tr> 
    </tbody> 
</table>

स्रोत

2010-05-20 Ricket

आप अपनी तालिका पंक्ति का एक उदाहरण पोस्ट कर सकते हैं? –

मेरी व्यक्तिगत राय - और मुझे पता है कि अधिकांश असहमत होंगे, जावास्क्रिप्ट का उपयोग करना है। ब्राउज़र और लोग जो जावास्क्रिप्ट का समर्थन नहीं करते हैं वे अविश्वसनीय रूप से छोटे हैं और इंटरनेट का अधिकतर गायब हैं। एक और तरीका जो संभव है, divs का उपयोग करके टेबल फ्रेमवर्क को फिर से बनाना है और एक एंकर एक्ट एक ट्र (डिस्प्ले ब्लॉक) –

के रूप में है, मैं असहमत नहीं हूं। इस दिन और उम्र में यह चिंता करने के लिए मूर्खतापूर्ण है कि जितना अधिकतर डॉक्टरों के वेब-हेड करते हैं। एचटीएमएल 5 में समर्थित आधुनिक अभिगम्यता विशेषताओं के साथ, आपको वास्तव में इसके बारे में चिंता करने की भी आवश्यकता नहीं है - accessibilty समर्थन वास्तव में * बेहतर * हो सकता है। – Pointy

मेरी प्राथमिकता यह (शायद नाम) के लिए सबसे तार्किक सेल में एक लिंक डाल करने के लिए है, तो की तर्ज पर एक घटना हैंडलर जोड़ने होगा:

tr.onclick = function (e) { 
    location.href = this.getElementsByTagName('a')[0].href; 
}

गैर जे एस ग्राहकों होगा अभी भी नियमित लिंक का उपयोग करने में सक्षम हो।

अधिक कुशलता से, ईवेंट हैंडलर को तालिका में संलग्न करें और क्लिक ऑब्जेक्ट को क्लिक करने के लिए ईवेंट ऑब्जेक्ट का उपयोग करें और फिर जब तक यह पंक्ति को हिट न करे तब तक माता-पिता के पेड़ पर चढ़ जाएं। यह शायद यूयूआई या jQuery जैसी लाइब्रेरी के साथ सबसे अच्छा हासिल किया जाता है।

स्रोत

2010-05-20 17:44:44 Quentin

LINK

आप एक कड़ी के रूप में कार्य पंक्ति होने के रूप को प्रदान कर काफी: Lerxst के अनुरोध पर, यहाँ कुछ पंक्तियों के साथ एक मेज का एक उदाहरण है , लिंक को दोबारा लिंक करने के लिए सीएसएस परिवर्तन रंग और माउस पर और क्लिक करें जो उचित परिवर्तन पर प्रतिक्रिया करते हैं और रीडायरेक्ट करते हैं, लिंक यह बताता है कि

फ़ॉलबैक को टैग लिंक जोड़ा जा सकता है यदि जेएस उपलब्ध नहीं है, तो कोड जेएस के बिना लोग अभी भी पंक्ति में शामिल लिंक का उपयोग कर सकते हैं। तो आपके पास फॉलबैक विकल्प

स्रोत

2010-05-20 17:32:50

उन्होंने जावास्क्रिप्ट के बिना ऐसा करने के लिए कहा। – Pointy

जावास्क्रिप्ट समर्थन के बिना, आप बस नहीं कर सकते हैं। एक लिंक एक लिंक है, और एक टेबल पंक्ति एक तालिका पंक्ति है (यानी, <a> एक <a> है और <tr><tr> है)। टेबल पंक्तियों और अधिकांश अन्य मार्कअप तत्वों में कोई "प्राकृतिक" लिंक-जैसा व्यवहार नहीं होता है। सबसे अच्छा आप सामग्री के चारों ओर <a> टैग के साथ अपने सभी टेबल सेल भर सकते हैं। संपादित करें: ध्यान दें कि आप शैलियों को ट्विक करना चाहते हैं ताकि <a> टैग इस तरह से रखे गए हैं कि वे तालिका कक्षों को पूरी तरह से भरें; शायद उन्हें स्टार्टर्स के लिए display: block बनाएं।

या आप जावास्क्रिप्ट का उपयोग कर सकते हैं।

स्रोत

2010-05-20 17:33:08 Pointy

* प्रत्येक * सेल में एक लिंक डालने में समस्या यह है कि गैर-पॉइंटर उपयोगकर्ताओं को तब एक ही लिंक (अनिवार्य रूप से) की कई प्रतियों के माध्यम से टैब करना होगा। यह एक भयानक अनुभव के लिए बनाता है। – Quentin

मैं पूरी तरह से सहमत हूं। बेशक, कीबोर्ड नेविगेटर्स को जावास्क्रिप्ट समाधान के साथ भी इसका असर होगा, जब तक कि कुछ एआरआईए गुणों को ' 'में जोड़ा जा सकता है। हालांकि मुझे इसके बारे में पर्याप्त जानकारी नहीं है। (ओह, आपके समाधान को देखकर मैं देख रहा हूं कि आप क्या प्राप्त कर रहे हैं।) – Pointy

<html><head> 
    <style type="text/css"> 
    table a { display: block; } 
    table a:hover { background: yellow; } 
    .name { display: block; float: left; width: 300px; } 
    </style> 

</head><body> 
     <table> 
     <thead> 
      <tr><th class="name">Name</th><th>Number of widgets</th></tr> 
     </thead> 
     <tbody> 
      <tr><td colspan="2"><a href="#"><span class="name">Bob Smith</span>Three</a></td></tr> 
      <tr><td colspan="2"><a href="#"><span class="name">Bob Smith</span>Three</a></td></tr> 
     </tbody> 
    </table> 

</body></html>

स्रोत

2010-05-20 17:34:14 Riley

बस तालिका के लिए तालिका में तालिका? मुझे नहीं लगता कि यह एक अच्छा विचार है। – prostynick

'' टैग के अंदर एक टेबल डालने के लिए यह पूरी तरह से अवैध HTML है। (* संपादित करें: * एचटीएमएल 5 को छोड़कर, लेकिन मुझे नहीं पता कि आईई 6 इसे चाहेगा) – Pointy

बस साथी को व्यवहार्य समाधान प्रदान करने का प्रयास कर रहा है। वह जावास्क्रिप्ट उदाहरण नहीं चाहता है। :) @prostynick इस सवाल के भीतर कुछ "मुझे नहीं लगता कि यह एक अच्छा विचार है"। – Riley

आप टेबल त्याग करने को तैयार हैं तो नीचे दिए गए समाधान सबसे सरल है और जावास्क्रिप्ट की आवश्यकता नहीं है:

<style type="text/css"> 
.table { 
    border-collapse:collapse; 
    border-spacing:0; 
    display:table; 
} 
.table .row { 
    display:table-row; 
} 
.table .cell { 
    display:table-cell; 
}  
</style> 

<section class="table"> 
    <a class="row" href="#"> 
    <div class="cell"> 
     A 
    </div> 
    <div class="cell"> 
     B 
    </div> 
    <div class="cell"> 
     C 
    </div> 
    </a> 
</section>

स्रोत

2012-08-13 10:36:38

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

उत्तर

संबंधित मुद्दे