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

Question

मैं बूटस्ट्रैप का उपयोग कर रहा हूं और निम्नलिखित काम नहीं करता है:

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

Comments

इसके लिए जावास्क्रिप्ट बेहतर हो सकता है

— जॉन कॉनडे

वह बूटस्ट्रैप का उपयोग कर रहा है, इसलिए मुझे लगता है कि उसे यह करने में सक्षम होना चाहिए :)

— अहमद मसूद

पंक्ति के पहले एक पारदर्शी ए तत्व डालने के बारे में कैसे? इस तरह इसमें एक वास्तविक लिंक (स्थिति पट्टी, मध्य क्लिक आदि ...) के सभी गुण होंगे और तालिका के स्वरूप को भी नहीं बदलेगा (यदि वह वांछित है)।

— डेविड बालिक

Html की

— जोसेफ होल्स्टेन

getbootstrap.com/docs/4.3/utilities/stretched-link

— एलन

Answer 1

लेखक का नोट I:

कृपया नीचे दिए गए अन्य उत्तरों को देखें, विशेष रूप से वे जो jquery का उपयोग नहीं करते हैं।

लेखक का नोट II:

पोस्टरिटी के लिए संरक्षित लेकिन निश्चित रूप से 2020 में गलत दृष्टिकोण। (2017 में गैर मुहावरेदार भी)

मूल उत्तर

आप बूटस्ट्रैप का उपयोग कर रहे हैं जिसका अर्थ है कि आप jQuery: ^) का उपयोग कर रहे हैं, इसलिए ऐसा करने का एक तरीका है:

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

बेशक आपको href या स्विच लोकेशन का उपयोग करने की आवश्यकता नहीं है, आप क्लिक हैंडलर फंक्शन में जो चाहें कर सकते हैं। पर पढ़ें jQueryऔर कैसे संचालकों लिखने के लिए;

आईडी से अधिक कक्षा का उपयोग करने का लाभ यह है कि आप समाधान को कई पंक्तियों में लागू कर सकते हैं:

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

और आपका कोड आधार नहीं बदलता है। एक ही हैंडलर सभी पंक्तियों का ध्यान रखेगा।

एक अन्य विकल्प

आप बूटस्ट्रैप jQuery कॉलबैक का उपयोग इस तरह कर सकते हैं ( document.readyकॉलबैक में):

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

यह तालिका सॉर्टिंग (जो अन्य विकल्प के साथ होता है) पर रीसेट नहीं होने का लाभ है।

---

ध्यान दें

चूंकि यह पोस्ट किया window.document.locationगया था, window.locationइसके बजाय अप्रचलित (या बहुत कम से कम पदावनत) उपयोग है ।

Comments

आप कर्सर को css के साथ बदलना भी चाह सकते हैं: tr.clickableRow {कर्सर: पॉइंटर; }

— विंस्टन कोटेज़ेन

बस यह जोड़ना चाहता था कि आप hrefए पर विशेषता का उपयोग न करें tr, क्योंकि यह इस तत्व के लिए वैध विशेषता नहीं है। इसके बजाय डेटा विशेषताओं का उपयोग करें: data-url="{linkurl}"और js कोड में:$(this).data('url')

— मेक्सिम वी।

आप प्रत्येक पंक्ति पर एक वर्ग का उपयोग करने से बच सकते हैं, और clickable_row(केमेलकेसे HTML मानकों के खिलाफ है) के एक वर्ग के नाम के साथ मेज को सजाने के लिए और कम मामले होना चाहिए (मैं इस के साथ कुछ समय पार ब्राउज़र के साथ समस्या थी)) और फिर jQuery है $('.clickable_row tr').click(function ...लेकिन वास्तव में आपको data-डेटा रखने के लिए उपयोग करना चाहिए , बजाय इसके hrefकि कस्टम डेटा के लिए विनिर्देश है। data-urlऔर jquery इसे एक्सेस करेगा जैसे$(this).data(url);

— पिओटर कुला

FYI करें: यदि आप कर सकते हैं, तो आपको उन लोगों के लिए tr में कहीं लिंक छोड़ना चाहिए, जिनके पास जावास्क्रिप्ट अक्षम है।

— १

इस समाधान का एक बड़ा प्रशंसक नहीं है क्योंकि उपयोगकर्ता जब मँडराते समय ब्राउज़र के निचले भाग में लिंक URL नहीं देखते हैं, और इससे भी महत्वपूर्ण बात यह है कि एक नए टैब में इसे खोलने के लिए लिंक पर व्हील-क्लिक न करें। प्रत्येक सेल के अंदर एक aटैग डालना display: block;थोड़ा कष्टप्रद है लेकिन यह इस मुद्दे को हल करने के लिए सबसे अधिक उपयोगी तरीका लगता है।

— मैक्सिम रॉसिनी

Answer 2

आप ऐसा नहीं कर सकते। यह अमान्य HTML है। आप <a>एक <tbody>और एक के बीच में नहीं डाल सकते हैं <tr>। इसके बजाय यह प्रयास करें:

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

सूचक दृश्य के लिए शैली जोड़ें

[data-href] { cursor: pointer; }

जब आप इस पर काम करते हैं, तो आप HTML के बाहर क्लिक हैंडलर को असाइन करने के लिए जावास्क्रिप्ट का उपयोग करना चाहेंगे।

Comments

@ ऑक्विलो विशेष रूप से बताता है कि वह बूटस्ट्रैप का उपयोग कर रहा है। इसलिए एक jQuery समाधान ढांचे के भीतर बेहतर होगा

— अहमद मसूद

@AhmedMasud इस मामले में, हाँ। हालांकि भविष्य के किसी भी पाठक के लिए जेएस एक बेहतर समाधान हो सकता है। चूँकि स्टैकओवरफ़्लो का उद्देश्य, मैं अभी भी अपनी टिप्पणी को एक वैध मानता हूँ।

— मेंनो

व्यवहार और मार्कअप के अलगाव को निश्चित रूप से पसंद किया जाना है। यदि कुछ भी हो, तो मैं कहूंगा कि href किसी tr पर मान्य विशेषता नहीं है। इसे डेटा-href के साथ बदला जाना चाहिए और $ (यह) .attr को $ (इस) .data से प्रतिस्थापित किया जाना चाहिए।

— दाविदफर्बर

या आप <a>क्लिक की गई पंक्ति के अंदर पहली बार ".clickableRow" क्लास इवेंट बाइंडिंग अप्रोच बना सकते हैं । (यह भी इनायत से नीचा दिखाना होगा)

— जेसन स्पर्सके

यदि आप ES6 सिंटैक्स का उपयोग कर रहे हैं, तो आप लिंक पर क्लिक कर सकते हैं, जैसे:onClick={() => window.open('https://stackoverflow.com/', '_blank')}

— Louie Bertoncin

Answer 3

आप प्रत्येक के अंदर एक एंकर शामिल कर सकते हैं <td>, जैसे:

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

आप display:block;पूरी पंक्ति को क्लिक करने योग्य बनाने के लिए एंकरों पर उपयोग कर सकते हैं ।

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

उदाहरण jsFiddle यहाँ।

जब तक आप जावास्क्रिप्ट का सहारा नहीं लेंगे, यह संभवतः उतना ही इष्टतम है जितना आप इसे प्राप्त करने जा रहे हैं।

Comments

यह सबसे अच्छा समाधान है, कोई jquery नहीं जावास्क्रिप्ट केवल CSS, अर्थात मेरा लिंक भिन्न नहीं हो सकता है, कई मापदंडों के साथ <a4j: commandLink /> ताकि मैं इसे रखूं और केवल शैली बदलूं। बहुत धन्यवाद।

— तीयेबएम

@daniel अच्छा जवाब है, लेकिन अगर सेल का विस्तार होता है, तो इस तरह से ठीक से काम नहीं करता है jsfiddle.net/RFFy9/253

— मिडस्टैक

महान! यदि उपयोगकर्ता चाहे तो यह समाधान एक नए टैब में लिंक को खोलने में सक्षम बनाता है। लेकिन खाली कॉलम में लिंक नहीं होंगे।

— इग्नासियो पेरेज़

@AnnaRouben मैं असहमत होने जा रहा हूं: कई समान लिंक अपसाइड्स की तुलना में बहुत छोटा है (जेएस के बिना काम करता है, स्क्रीन रीडर पढ़ सकता है जहां लिंक आगे बढ़ रहा है, नए टैब में खुलने के लिए ctrl-click कर सकता है। ..) जेएस समाधानों की तुलना में शुद्ध-एचटीएमएल समाधान सहायक सॉफ्टवेयर में लगभग हमेशा बेहतर काम करते हैं।

— JJJ

मुझे यह समाधान पसंद है क्योंकि यह कितना सुलभ है। उपयोगकर्ता लिंक के माध्यम से टैब कर सकते हैं, साथ ही आप नए टैब में लिंक खोल सकते हैं। मैंने अपने ऐप में जो कुछ भी किया है वह tabindex="-1"सभी पर रखा गया है लेकिन पहला <td>लिंक है, इसलिए उपयोगकर्ता टैब पंक्ति से पंक्ति में है, सेल से सेल में नहीं। साथ ही, यदि आप :focus-withinCSS छद्म श्रेणी का उपयोग करना चाहते हैं, तब भी आप पूरी पंक्ति को हाइलाइट / रेखांकित कर सकते हैं ।

— जोनाथन

Answer 4

एक लिंक की गई तालिका पंक्ति संभव है, लेकिन मानक <table>तत्वों के साथ नहीं । आप इसे display: tableशैली के गुणों का उपयोग करके कर सकते हैं । यहाँ और यहाँ कुछ पहेलियों को प्रदर्शित करना है।

इस कोड को चाल करना चाहिए:

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

ध्यान दें कि मानक <table>तत्वों का उपयोग नहीं करने के बाद उचित पहुंच सुनिश्चित करने के लिए ARIA भूमिकाओं की आवश्यकता होती है । आपको role="columnheader"लागू होने पर अतिरिक्त भूमिकाएँ जोड़ने की आवश्यकता हो सकती है । यहाँ गाइड पर अधिक जानकारी प्राप्त करें।

Comments

अब इस एक के लिए डेटाटेबल्स प्लगइन लागू करने का प्रयास करें! :)

— अफोंसो

यह सही उत्तर IMHO है, क्योंकि यह लिंक से संबंधित सभी उपयोगकर्ता एजेंट टूल को बरकरार रखता है: खोज (उदाहरण के लिए /फ़ायरफ़ॉक्स में कुंजी), नेविगेशन ( tabकुंजी), कॉपी लिंक स्थान, नए टैब / विंडो में खोलें, यहां तक ​​कि सुलभ / विशेष के लिए। ब्राउज़र की जरूरत है। मेरा एकमात्र निपिक यह है कि मैं <div>अंदर एक घोंसला नहीं बनाऊंगा <a>, इसलिए कोशिकाओं को बेहतर तरीके से चिह्नित किया जाएगा <span>।

— तोबिया

तृतीय-पक्ष प्लगइन्स और पुस्तकालयों को ऐसी सीएसएस तालिकाओं पर लागू करने में थोड़ा अधिक काम शामिल हो सकता है, लेकिन यह आमतौर पर कॉपी-पेस्ट और प्रतिस्थापित होता है। उदाहरण के लिए, मैंने अभी बूटस्ट्रैप के अपने _tables.scssऔर कुछ अन्य यादृच्छिक टुकड़ों को दोहराया है , सीएसएस कक्षाओं की सभी घटनाओं को प्रतिस्थापित करने के लिए जिन्हें मैंने इस्तेमाल करने के लिए चुना है (जो कि तत्वों के समान ही हैं: th→ .th) लाभ की तुलना में बहुत काम नहीं, वास्तव में ।

— तोबिया

अच्छा जवाब है, लेकिन यह केवल एक समाधान है यदि तालिका का उपयोग केवल उचित संरेखण के लिए किया गया था (जो कई स्थितियों में मामला है)। सारणीबद्ध डेटा के लिए, शब्दार्थ <table>एक कारण से है। लेकिन यह अभी भी किसी भी जावास्क्रिप्ट समाधान को

— हरा देता है

यद्यपि यह एक बहुत ही चतुर काम है, लेकिन यह सिर्फ इतना ही है। यह वास्तव में एक तालिका नहीं है और इसलिए, जैसा कि लेखक उल्लेख करता है, सुलभता के लिए समस्याएं पेश करेगा। यह अन्य चीजों के साथ मुद्दों की संभावना पैदा करेगा जो एक मेज की उम्मीद कर रहे हैं लेकिन एक हो रहे हैं।

— टायसन गिब्बी

Answer 5

मानक बूटस्ट्रैप 4.3+ का उपयोग करके प्राप्त किया गया है - कोई jQuery और न ही किसी अतिरिक्त सीएसएस वर्गों की जरूरत है!

कुंजी stretched-linkसेल के भीतर पाठ पर उपयोग करने के लिए है और <tr>एक युक्त ब्लॉक के रूप में परिभाषित करता है।

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

आप अलग-अलग तरीकों से ब्लॉक को परिभाषित कर सकते हैं उदाहरण के लिए transformकोई मूल्य नहीं (उदाहरण के लिए ऊपर)।

अधिक जानकारी के लिए यहां पढ़ें बूटस्ट्रैप प्रलेखन के लिए stretched-link।

Comments

यह जवाब अधिक वोट का हकदार है। कोई जावास्क्रिप्ट बिल्कुल नहीं। और वह किस scope="row"लिए है? मैं गुंजाइश का उपयोग नहीं करता और पंक्ति अभी भी एक लिंक के रूप में व्यवहार करती है।

— क्रिसथोफर नेटालियस

@ChththoferNatalius धन्यवाद! मेरे मूल उत्तर में यह नहीं था scope="row"- कृपया इतिहास देखें अगर आप यह देखना चाहते हैं कि और क्या संपादित किया जा सकता है। मैंने संपादन को वापस नहीं किया, हालाँकि, जैसा कि कोड स्निपेट काम करता है (जैसा कि मूल था) और मुझे नए कोड का संपूर्ण रूप से परीक्षण करने का मौका नहीं मिला :-)

— कृष्णा गुप्ता

इसका नकारात्मक पक्ष यह है क्योंकि लिंक कॉलम के शीर्ष पर होगा, आप पाठ की प्रतिलिपि नहीं बना सकते हैं, और td में विशेषता शीर्षक माउस द्वारा मँडरा नहीं दिखा रहा है। इसलिए दुर्भाग्य से, मुझे पुराने तरीके से वापस जाना होगा, लिंक को केवल एक कॉलम में रखना होगा।

— क्रिसथोफर नटालियस

मुझे यह समाधान पसंद आया, लेकिन दुख की बात है कि यह क्रॉस-ब्राउज़र नहीं है (क्रोम / फ़ायरफ़ॉक्स ठीक हैं लेकिन सफारी नहीं हैं)। समस्या trउन

— टैगों के कारण है

Answer 6

एक बहुत अधिक लचीला समाधान डेटा-href विशेषता के साथ कुछ भी लक्षित करना है। यह था कि आप विभिन्न स्थानों में आसानी से कोड का पुन: उपयोग कर सकते हैं।

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

तब आपके jQuery में उस विशेषता के साथ किसी भी तत्व को लक्षित करें:

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

और अपने css को स्टाइल करना न भूलें:

[data-href] {
    cursor: pointer;
}

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

Comments

सीएसएस के साथ अच्छी नौकरी

— अमीरहोसिन तार्मास्ट

मेरा पसंदीदा समाधान। शाबाश MF

— MFrazier

Answer 7

आप इस बूटस्ट्रैप घटक का उपयोग कर सकते हैं:

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

जैसि बूटस्ट्रैप

आपके पसंदीदा फ्रंट-एंड फ्रेमवर्क के लिए लापता घटक।

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

प्रयोग

डेटा विशेषताएँ

कक्षा जोड़ें .rowlinkऔर विशेषता data-link="row"एक करने के लिए <table>या <tbody>तत्व। अन्य विकल्पों के लिए नाम को डेटा में जोड़ें- जैसे कि data-target="a.mainlink"सेल में .rowlink-skipक्लास को जोड़कर बाहर रखा जा सकता है <td>।

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

जावास्क्रिप्ट के माध्यम से इनपुट मास्क को कॉल करें:

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

Answer 8

तकनीकी रूप से इसे करने का एक अच्छा तरीका है <a> टैग के<tr> , जो शब्दार्थ से गलत हो सकता है (आपको ब्राउज़र चेतावनी दे सकता है), लेकिन बिना किसी JavaScript/jQueryआवश्यकता के साथ काम करेगा :

<!-- 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';
}

पुनश्च: ध्यान दें कि ट्रिक <a>अंतिम तत्व के रूप में टैग लगाने के लिए है, अन्यथा यह पहली <td>सेल का स्थान लेने की कोशिश करेगा ।

PPS: अब आपकी पूरी पंक्ति क्लिक करने योग्य होगी और आप इस लिंक का उपयोग नए टैब में खोलने के लिए भी कर सकते हैं (Ctrl / CMD +)

Comments

क्या यह मूल रूप से मेरे उत्तर के समान नहीं है ?

— डेविड बालैसिक

हालांकि यह उत्तर सही लगता है, यह वास्तव में काम नहीं करता है, क्योंकि <tr>तत्वों <a>में एक बच्चे के रूप में एक तत्व नहीं हो सकता है । केवल <td>और <th>वैध बच्चे हैं। देखें: stackoverflow.com/questions/12634715/…

— funkybunky

Answer 9

आप tr में onclick javascript मेथड का उपयोग कर सकते हैं और इसे क्लिक करने योग्य बना सकते हैं, अगर आपको कुछ विवरणों के कारण अपने लिंक को बनाने की आवश्यकता है, तो आप जावास्क्रिप्ट में एक फ़ंक्शन की घोषणा कर सकते हैं और इसे onclick में कॉल कर सकते हैं, कुछ मान पास कर सकते हैं।

Answer 10

यहां तालिका पंक्तियों पर एक पारदर्शी ए तत्व डालकर एक तरीका है। लाभ हैं:

• एक वास्तविक लिंक तत्व है: होवर परिवर्तन सूचक पर, स्थिति पट्टी में लक्ष्य लिंक दिखाता है, कीबोर्ड को नेविगेट किया जा सकता है, नए टैब या विंडो में खोला जा सकता है, URL की प्रतिलिपि बनाई जा सकती है, आदि।
• तालिका जोड़ा लिंक के बिना के रूप में एक ही लग रहा है
• तालिका कोड में कोई परिवर्तन नहीं हुआ

नुकसान:

• ए तत्व का आकार एक स्क्रिप्ट में सेट होना चाहिए, दोनों सृजन पर और पंक्ति के आकार में किसी भी परिवर्तन के बाद इसे कवर किया जाता है (अन्यथा यह बिना किसी जावास्क्रिप्ट के साथ किया जा सकता है, जो अभी भी संभव है यदि तालिका आकार भी सेट किया गया है HTML या CSS में)

तालिका इस प्रकार है:

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

प्रत्येक पहले कॉलम में एक तत्व डालने और आवश्यक गुण सेट करके jQuery जावास्क्रिप्ट के माध्यम से लिंक (प्रत्येक पंक्ति के लिए) जोड़ें:

// 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)
        ;
    });

चौड़ाई और ऊंचाई की सेटिंग मुश्किल हो सकती है, अगर कई पैडिंग और मार्जिन का उपयोग किया जाता है, लेकिन सामान्य तौर पर कुछ पिक्सेल बंद भी नहीं होना चाहिए।

यहां लाइव डेमो: http://jsfiddle.net/qo0dx0oo/ (फ़ायरफ़ॉक्स में काम करता है, लेकिन IE या क्रोम नहीं, वहां लिंक गलत है)

Chrome और IE के लिए निश्चित (अभी भी FF में भी काम करता है): http://jsfiddle.net/qo0dx0oo/2/

Comments

चतुर समाधान। मैंने पाया कि तत्व को आलसी बनाते हुए, केवल एक बार पंक्ति को हॉवर करने के बाद, बड़ी तालिकाओं के लिए विशाल प्रदर्शन को बढ़ावा दिया।

— लेवी

@ लेवी क्या आप इस बारे में कुछ प्रतिक्रिया दे सकते हैं कि यह कैसे आलसी है?

— अचेतन हाश

@KemalEmin मुझे लगता है कि वह जावास्क्रिप्ट का उपयोग करेगाonmouseover

— ब्रैड

Answer 11

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

एचटीएमएल

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

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

Comments

वाह यह वास्तव में jquery कोड के बिना डेटा-href के बजाय ui-sref के साथ काम करता है। बस उंगली को कर्सर बदलने की जरूरत है।

— नर्स

इसने दोषपूर्ण तरीके से एक टन का काम किया

— आशीष बनर्जी

Answer 12

यह कोड bellow आपकी पूरी तालिका को क्लिक करने योग्य बना देगा। इस उदाहरण में लिंक पर क्लिक करने से लिंक का अनुसरण करने के बजाय चेतावनी संवाद में लिंक दिखाई देगा।

HTML:

यहाँ उपरोक्त उदाहरण के पीछे 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>

सीएसएस

और सीएसएस:

    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

और आखिरकार jQuery जो जादू करता है:

    $(document).ready(function() {

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

});

यह तब होता है जब एक पंक्ति पर क्लिक किया जाता है, एक लंगर से संबंधित href के लिए एक खोज की जाती है। यदि कोई पाया जाता है, तो विंडो का स्थान उस href पर सेट होता है।

Answer 13

एक बहुत ही आसान विकल्प केवल मेरे दृष्टिकोण में, ऑन-क्लिक, और अधिक सही का उपयोग करना है, क्योंकि यह दृश्य और नियंत्रक को अलग करता है, और आपको URL पर कड़ी मेहनत करने की आवश्यकता नहीं है या जो भी आपको क्लिक के साथ पूरा करने की आवश्यकता है। । यह कोणीय एनजी-क्लिक के साथ भी काम करता है।

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

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

उदाहरण के लिए काम कर रहा यहाँ

Comments

निश्चित रूप से यह सही उत्तर है। दूसरों को इस तरह के एक साधारण बात के लिए पागलपन जटिल है। यदि आप माउस पॉइंटर बदलना चाहते हैं तो आप tr: hover {कर्सर: पॉइंटर जोड़ सकते हैं; } अपने सीएसएस वर्ग में

— टॉम क्लोज

@TomClose इस बात पर निर्भर करता है कि आप पंक्ति को क्या करना चाहते हैं, यह समस्याग्रस्त हो सकता है, जैसे कि नेविगेशन सामान्य रूप से काम नहीं करेगा - नई टैब / विंडो में खुले के लिए कोई शिफ्ट क्लिक नहीं, गंतव्य देखने के लिए कोई हॉवर नहीं, आदि

— NetMage

Answer 14

एक अन्य विकल्प एक का उपयोग कर <a>, सीएसएस पदों और कुछ jQuery या जे एस :

HTML:

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

सीएसएस:

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

फिर आपको एक चौड़ाई देने की आवश्यकता है, उदाहरण के लिए jQuery का उपयोग करते हुए:

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

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

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

Answer 15

मुझे पता है कि किसी ने पहले से ही बहुत अधिक लिखा है, हालांकि मेरा तरीका सही तरीका है (डि ए का बच्चा नहीं हो सकता) और कक्षाओं का उपयोग करना भी बेहतर है।

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

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

मैं onclick=""विशेषता का उपयोग करना पसंद करूंगा क्योंकि यह नौसिखिया के लिए उपयोग करना और समझना आसान है

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

Answer 17

यहाँ सरल समाधान है ..

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

Answer 18

स्वीकृत उत्तर बहुत अच्छा है, लेकिन मैं एक छोटा सा विकल्प प्रस्तावित करता हूं यदि आप हर tr पर url दोहराना नहीं चाहते हैं। तो आप यूआरएल या href को टेबल डेटा-यूआरएल में डालें और ट्र को नहीं।

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

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

Answer 19

एक समाधान जिसका पहले उल्लेख नहीं किया गया था, वह सेल में एक लिंक और कुछ CSS का उपयोग करके कोशिकाओं पर इस लिंक को बढ़ा सकता है:

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>

Comments

यह बल्कि सुरुचिपूर्ण दिखता है। लेकिन गूगल लिंक डेमो काम नहीं करता है। Stackoverflow एक करता है। संभवत: बस Google के गधे होने के कारण वे अक्सर होते हैं। हो सकता है कि बिंग से लिंक :-) उन्हें सही काम करता है। किसी भी तरह वी अच्छा और साफ समाधान।

— BeNice

यह मुझे काम करता है !! अच्छा समाधान। ध्यान देने वाली एक बात यह है कि टेबल को कवर करने के लिए a: से पहले की चौड़ाई काफी लंबी होनी चाहिए।

— अरस्त

Answer 20

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

जबकि यहाँ पर मुख्य समाधान महान है, मेरा समाधान कक्षाओं की आवश्यकता को दूर करता है। आपको बस इसमें URL के साथ डेटा-href विशेषता को जोड़ना होगा।

Answer 21

मैंने इस समस्या को हल करने में बहुत समय लगाया है।

3 दृष्टिकोण हैं:

1. जावास्क्रिप्ट का उपयोग करें। स्पष्ट कमियां: मूल रूप से एक नया टैब खोलना संभव नहीं है, और जब पंक्ति में मँडराते हैं तो स्टेटस बार पर कोई संकेत नहीं होगा जैसे नियमित लिंक होते हैं। अभिगम्यता भी एक प्रश्न है।

2. HTML / CSS का ही प्रयोग करें। इसका मतलब है <a>प्रत्येक के नीचे नेस्टेड लगाना <td>। इस फिडल जैसा एक सरल दृष्टिकोण काम नहीं करता है - क्योंकि क्लिक करने योग्य सतह प्रत्येक स्तंभ के लिए आवश्यक नहीं है। यह एक गंभीर यूएक्स चिंता है। इसके अलावा, यदि आपको <button>पंक्ति में जरूरत है, तो इसे नीचे घोंसला बनाने के लिए वैध HTML नहीं है<a> टैग के (हालांकि ब्राउज़र इसके साथ ठीक हैं)।

   मैंने इस दृष्टिकोण को लागू करने के लिए 3 अन्य तरीके ढूंढे हैं। पहले ठीक है, अन्य दो महान नहीं हैं।

   क) इस उदाहरण पर एक नज़र डालें :

   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%;
   }

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

   b) सेटिंग <td>करना{ display: contents; } । इससे 2 अन्य समस्याएं होती हैं:

   बी 1। अगर कोई व्यक्ति सीधे <td>टैग को स्टाइल करने की कोशिश करता है , जैसे उसे सेट करना है { width: 20px; }, तो हमें उस स्टाइल को किसी तरह पास करना होगा<a> टैग में । हमें ऐसा करने के लिए कुछ जादू की आवश्यकता है, शायद जावास्क्रिप्ट विकल्प की तुलना में अधिक जादू।

   b2। { display: contents; }अभी भी प्रायोगिक है; विशेष रूप से यह एज पर समर्थित नहीं है।

   c) सेटिंग <td>करना { height: --some-fixed-value; }। यह सिर्फ पर्याप्त लचीला नहीं है।

3. अंतिम दृष्टिकोण, जिसे मैं गंभीरता से सोचने की सलाह देता हूं, वह है क्लिक करने योग्य पंक्तियों का उपयोग न करना । क्लिक करने योग्य पंक्तियाँ एक महान UX अनुभव नहीं है: क्लिक करने योग्य के रूप में उन्हें नेत्रहीन रूप से चिह्नित करना आसान नहीं है, और यह चुनौती देता है जब बटन के जैसे पंक्तियों के भीतर कई भाग क्लिक करने योग्य होते हैं। इसलिए एक व्यवहार्य विकल्प <a>केवल पहले कॉलम पर एक टैग हो सकता है , एक नियमित लिंक के रूप में प्रदर्शित किया जाता है, और इसे पूरी पंक्ति को नेविगेट करने की भूमिका देता है।

Answer 22

यहाँ एक और तरीका है ...

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

      });

});

Comments

हम इसे नए टैब में कैसे खोल सकते हैं? @klewis

— खुशबु वाघेला

Answer 23

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

# यूआरएल के साथ बदलें, tabindex="0"किसी भी तत्व को ध्यान देने योग्य बनाता है

Answer 24

आप पंक्ति को एक आईडी दे सकते हैं, जैसे

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

और फिर कुछ कहने के लिए jquery का उपयोग करें:

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

Comments

मेरा मानना ​​है कि आप आईडी के बजाय कक्षा का उपयोग करना चाहते हैं क्योंकि आप बहुधा कई पंक्तियों के होने जा रहे हैं और आईडी का उपयोग केवल एक आइटम के लिए किया जाना चाहिए।

— प्रोग्रामिंग

Answer 25

हमें "div" टैग का उपयोग क्यों नहीं करना चाहिए ...।

<div>

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

</div>

Comments

आपको सीएसएस डिस्प्ले के साथ अपने जवाब में सुधार करना चाहिए: टेबल

— एम

सीएसएस जोड़ने के साथ उत्तर में सुधार करें

— प्रथमेश