একটি লিঙ্ক হিসাবে ক্লিকযোগ্য টেবিলের মধ্যে কীভাবে একটি সম্পূর্ণ সারি তৈরি করবেন?

Question

আমি বুটস্ট্র্যাপ ব্যবহার করছি এবং নিম্নলিখিতগুলি কাজ করে না:

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

Comments

জাভাস্ক্রিপ্ট এর জন্য আরও ভাল হতে পারে

— জন কনডে

সে বুটস্ট্র্যাপ ব্যবহার করছে তাই আমার মনে হয় সে এটি করতে সক্ষম হবে :)

— আহমেদ মাসুদ

সারিটির আগে স্বচ্ছ একটি উপাদান রাখার বিষয়ে কীভাবে? এইভাবে এটিতে একটি বাস্তব লিঙ্কের সমস্ত বৈশিষ্ট্য থাকবে (স্ট্যাটাস বার, মিডল ক্লিক ইত্যাদি ...) এবং টেবিলের চেহারাও পরিবর্তন করা হবে না (যদি এটি পছন্দসই হয়)।

— ডেভিড বালাইচ

এইচটিএমএল এর

— জোসেফ হোলস্টেন

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

— অ্যালান

Answer 1

লেখকের নোট আমি:

দয়া করে নীচের অন্যান্য উত্তরগুলি দেখুন, বিশেষত যেগুলি jquery ব্যবহার করে না।

লেখকের নোট II:

উত্তরোত্তর জন্য সংরক্ষিত তবে অবশ্যই ২০২০- এ ভুল পদ্ধতির।

আসল উত্তর

আপনি বুটস্ট্র্যাপ ব্যবহার করছেন যার অর্থ আপনি 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}"এবং জেএস কোডে:$(this).data('url')

— মাকসিম ভি।

আপনি প্রতিটি সারিতে ক্লাস ব্যবহার এড়াতে পারবেন এবং শ্রেণীর নামের সাথে টেবিলটি clickable_rowসাজাতে পারেন (ক্যামেলকেস এইচটিএমএল মানগুলির বিরুদ্ধে এবং এটি নিম্নতর হওয়া উচিত (এর সাথে আমার কয়েকবার ক্রস ব্রাউজারে সমস্যা হয়েছিল)) এবং তারপরে jQuery $('.clickable_row tr').click(function ...কিন্তু আসলে আপনার কাস্টম ডেটার স্পেসিফিকেশন হ'ল data-পরিবর্তে ডেটা ধরে রাখতে ব্যবহার করা উচিত href। data-urlএবং jquery এটির মতো অ্যাক্সেস করবে$(this).data(url);

— পাইটর কুলা

এফওয়াইআই: আপনি যদি পারেন তবে জাভাস্ক্রিপ্ট অক্ষম করা লোকদের জন্য আপনার টিআর-তে কোনও লিঙ্ক রেখে দেওয়া উচিত।

— হাইটাটোডস্ট্রাকচার

এই সমাধানটির কোনও বড় অনুরাগী নন কারণ ব্যবহারকারীরা ঘোরাফেরা করার সময় ব্রাউজারের নীচে লিঙ্ক URL টি দেখতে পান না এবং আরও গুরুত্বপূর্ণভাবে কোনও নতুন ট্যাবে এটি খুলতে লিঙ্কটিতে হুইল-ক্লিক করতে পারে না। প্রতিটি কক্ষের অভ্যন্তরে aট্যাগ সন্নিবেশ করা display: block;কিছুটা বিরক্তিকর তবে এটি এই সমস্যার সমাধানের সবচেয়ে ব্যবহারযোগ্য উপায় বলে মনে হয়।

— ম্যাক্সিম রসিনি

Answer 2

আপনি এটা করতে পারবেন না। এটি অবৈধ এইচটিএমএল। আপনি <a>একটি <tbody>এবং একটি এর মধ্যে একটি স্থাপন করতে পারবেন না <tr>। পরিবর্তে এটি চেষ্টা করুন:

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

পয়েন্টার ভিউয়ের জন্য শৈলী যুক্ত করুন

[data-href] { cursor: pointer; }

আপনি এটি পর্যন্ত কাজ করার পরে, আপনি HTML এর বাইরের ক্লিক হ্যান্ডলারটি নিয়োগের জন্য জাভাস্ক্রিপ্ট ব্যবহার করতে চান।

Comments

@ অ্যাকিলো ওপিতে বিশেষত উল্লেখ করেছে যে সে বুটস্ট্র্যাপ ব্যবহার করছে। সুতরাং একটি jQuery সমাধান কাঠামোর মধ্যে আরও ভাল হতে পারে

— আহমেদ মাসুদ

@ আহমেদমাসুদ এই ক্ষেত্রে, হ্যাঁ। যদিও ভবিষ্যতের যে কোনও পাঠকের পক্ষে প্লেইন জেএস আরও ভাল সমাধান হতে পারে। যেহেতু স্ট্যাকওভারফ্লো এর উদ্দেশ্য তাই আমি এখনও আমার মন্তব্যটিকে একটি বৈধ বলে বিবেচনা করি।

— মেন্নো

আচরণ এবং মার্কআপের বিচ্ছেদ অবশ্যই পছন্দ করা উচিত। যদি কিছু থাকে তবে আমি বলব যে কোনও ট্রাইয়ের উপর href একটি বৈধ বৈশিষ্ট্য নয়। এটি একটি ডেটা-href দিয়ে প্রতিস্থাপন করা উচিত, এবং $ (এটি) .ডাটার সাথে $ (এটি) .ডাটা প্রতিস্থাপন করা উচিত।

— ডেভিডবার্বার

বা আপনি <a>ক্লিক করা সারির অভ্যন্তরে প্রথমটির জন্য "। ক্লিকযোগ্যযোগ্য" শ্রেণীর ইভেন্টের বাধ্যতামূলক পদ্ধতির চেহারা তৈরি করতে পারেন । (এটি

— কৃত্রিমভাবে অবনমিতও হবে

আপনি যদি ES6 সিনট্যাক্স ব্যবহার করে থাকেন তবে আপনি লিঙ্কের onClick={() => window.open('https://stackoverflow.com/', '_blank')}

— ক্লিকটি

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

এখানে jsFizz উদাহরণ।

আপনি সম্ভবত জাভাস্ক্রিপ্টের অবলম্বন না করে আপনি এটি পেতে যাচ্ছেন এটি সম্ভবত সর্বোত্তম।

Comments

এটি সেরা সমাধান, কোনও জ্যাকোয়ারি নয়, জাভাস্ক্রিপ্ট কেবল সিএসএস নয়, যেমন আমার লিঙ্কটি <a4j: কমান্ডলিঙ্ক /> এর মতো একাধিক পরামিতি সহ href না থেকে আলাদা হতে পারে তাই আমি এটি রাখি এবং কেবল শৈলী পরিবর্তন করি। অনেক ধন্যবাদ.

— TiyebM

@ ড্যানিয়েল ভাল উত্তর কিন্তু যদি ঘরটি প্রসারিত হয় তবে এই jsfiddle.net/RFFy9/253 এর

— মধ্যরাত

গ্রেট! ব্যবহারকারী চাইলে এই সমাধানটি নতুন ট্যাবে লিঙ্কটি খুলতে সক্ষম করে। তবে খালি কলামগুলির লিঙ্ক থাকবে না।

— ইগনেসিও পেরেজ

@ আননা রউবেন আমাকে একমত হতে হবে: পার্শ্ববর্তী অংশের তুলনায় একাধিক অনুরূপ লিঙ্ক থাকা খুব সামান্য খারাপ দিক (জেএস ছাড়াই কাজ করে, স্ক্রিন রিডারটি যেখানে লিঙ্কটি নিয়েছে সেখানে পড়তে পারে, নতুন ট্যাবে খোলার জন্য সিআরটিএল-ক্লিক করতে পারে)। ..) খাঁটি এইচটিএমএল সমাধানগুলি জেএস সলিউশনগুলির তুলনায় সহায়ক সফ্টওয়্যারটিতে প্রায় সবসময়ই ভাল কাজ করে।

— জেজেজে

আমি এই সমাধানটি পছন্দ করি কারণ এটি কতটা অ্যাক্সেসযোগ্য। ব্যবহারকারীরা লিঙ্কগুলির মাধ্যমে ট্যাব করতে পারবেন, এবং আপনি নতুন ট্যাবে লিঙ্কগুলি খুলতে পারবেন। আমি আমার অ্যাপ্লিকেশনটিতে যা করেছি তা tabindex="-1"প্রথম <td>লিঙ্ক ব্যতীত অন্য সকলের উপরে রাখা হয়েছে , সুতরাং ব্যবহারকারীরা ঘরে ঘরে সেল নয়, সারিতে সারি সারি ট্যাবগুলি রাখে। এছাড়াও, আপনি :focus-withinসিএসএস সিউডো-ক্লাস ব্যবহার করতে চাইলে আপনি এখনও পুরো সারিটি হাইলাইট / আউটলাইন করতে পারেন ।

— জোনাথন

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>উপাদান ব্যবহার করা হয়নি সেহেতু যথাযথ অ্যাক্সেসযোগ্যতা নিশ্চিত করতে এআরআইএ রোলগুলির প্রয়োজন । role="columnheader"প্রযোজ্য ক্ষেত্রে আপনার অতিরিক্ত ভূমিকা যুক্ত করতে পারে । গাইড এখানে আরও সন্ধান করুন।

Comments

এখন এটিতে ডেটা টেবিল প্লাগইন প্রয়োগ করার চেষ্টা করুন! :)

— আফনসো গোমেস

এটি সঠিক উত্তর আইএমএইচও, কারণ এটি লিঙ্ক সম্পর্কিত সমস্ত ব্যবহারকারী এজেন্ট সরঞ্জামগুলি বজায় রাখে: অনুসন্ধান (উদাহরণস্বরূপ /ফায়ারফক্সে কী), নেভিগেশন ( tabকী), লিঙ্কের অবস্থানের অনুলিপি করুন, এমনকি অ্যাক্সেসযোগ্য / বিশেষের জন্য নতুন ট্যাব / উইন্ডোতে খুলুন ইত্যাদি ব্রাউজার প্রয়োজন। আমার একমাত্র নিটপিকটি হ'ল আমি কোনও <div>অভ্যন্তরে বাসা বাঁধব না <a>, তাই কোষগুলি আরও ভাল হিসাবে চিহ্নিত করা হবে <span>।

— টোবিয়া

এই জাতীয় CSS টেবিলগুলিতে তৃতীয় পক্ষের প্লাগইন এবং লাইব্রেরি প্রয়োগ করা আরও কিছুটা কাজ জড়িত হতে পারে তবে এটি সাধারণত কপি-পেস্ট করে প্রতিস্থাপন করে। উদাহরণ হিসেবে বলা যায়, আমি শুধু বুটস্ট্র্যাপ নিজস্ব সদৃশ _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"জন্য? আমি সুযোগ ব্যবহার করি না এবং সারিটি এখনও একটি লিঙ্ক হিসাবে আচরণ করে।

— ক্রিস্টহোফার নাটালিয়াস

ক্রেস্টহোফেরনাটালিয়াসকে ধন্যবাদ! আমার আসল উত্তরে অন্তর্ভুক্তটি নেই scope="row"- আপনি কী সম্পাদনা করেছেন তা দেখতে চাইলে ইতিহাসটি পরীক্ষা করে দেখুন। কোড স্নিপেট যেমন কাজ করছে বলে মনে হয় আমি সম্পাদনাগুলি ফিরিয়ে আনিনি (মূল হিসাবে) এবং নতুন কোডটি নিখুঁতভাবে পরীক্ষা করার সুযোগ পেলাম না :-)

— কৃষ্ণ গুপ্ত

এর নেতিবাচক দিকটি হ'ল লিঙ্কটি কলামগুলির উপরে থাকবে, আপনি পাঠ্যটি অনুলিপি করতে পারবেন না, এবং টিডি তে গুণাবলীর শিরোনামটি মাউস দ্বারা আবদ্ধ হয়ে থাকলে প্রদর্শিত হচ্ছে না। দুর্ভাগ্যক্রমে, আমাকে আবার পুরানো পথে যেতে হবে, লিঙ্কটি কেবল একটি কলামে রেখে দিন।

— ক্রিস্টহোফার নাটালিয়াস

আমি এই সমাধানটি পছন্দ করেছি, তবে দুঃখের বিষয়, এটি ক্রস ব্রাউজার নয় (ক্রোম / ফায়ারফক্স ঠিক আছে তবে সাফারি নয়)। সমস্যা কারণে trট্যাগ যা ব্রাউজারের মধ্যে ধারণকারী ব্লক ... এর জন্য নিয়ম হিসাবে স্বীকৃত নয় stackoverflow.com/questions/61342248/...

— pom421

Answer 6

আরও অনেক নমনীয় সমাধান হ'ল ডেটা-হেরেফ বৈশিষ্ট্য সহ যেকোনো কিছুকে লক্ষ্য করা। এটি ছিল আপনি কোডটি সহজেই বিভিন্ন জায়গায় ব্যবহার করতে পারেন।

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

এবং আপনার সিএসএস স্টাইল করতে ভুলবেন না:

[data-href] {
    cursor: pointer;
}

এখন আপনি যে কোনও উপাদানগুলিতে ডেটা-href বৈশিষ্ট্য যুক্ত করতে পারেন এবং এটি কাজ করবে। আমি যখন এগুলির মতো স্নিপেটগুলি লিখি তখন আমি সেগুলি নমনীয় হওয়া পছন্দ করি। যদি আপনার কাছে এটি থাকে তবে এটিতে ভ্যানিলা জেএস সমাধানটি নির্দ্বিধায় যোগ করুন।

Comments

— সিএসএসের

আমার প্রিয় সমাধান। ভাল হয়েছে M

— এমফ্রাজিয়ার

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

PS: লক্ষ করুন এখানে কৌশলটি <a>সর্বশেষ উপাদান হিসাবে ট্যাগ করা , অন্যথায় এটি প্রথম <td>ঘরের স্থান নেওয়ার চেষ্টা করবে ।

পিপিএস: এখন আপনার সম্পূর্ণ সারিটি ক্লিকযোগ্য হবে এবং আপনি এই লিঙ্কটি নতুন ট্যাবে খোলার জন্যও ব্যবহার করতে পারেন (Ctrl / CMD + ক্লিক করুন)

Comments

এটি কি মূলত আমার উত্তরটির মতো নয় ?

— ডেভিড বালাইচ

যদিও এই উত্তরগুলি নিখুঁত দেখাচ্ছে, বাস্তবে এটি কার্যকর হয় না, কারণ <tr>উপাদানগুলির <a>একটি শিশু হিসাবে উপাদান থাকতে পারে না । শুধুমাত্র <td>এবং <th>বৈধ সন্তান। দেখুন: stackoverflow.com/questions/12634715/...

— funkybunky

Answer 9

আপনি ত্রি-তে অনক্লিক জাভাস্ক্রিপ্ট পদ্ধতিটি ব্যবহার করতে পারেন এবং এটিকে ক্লিকযোগ্য করে তুলতে পারেন, এছাড়াও যদি কিছু বিবরণের কারণে আপনার লিঙ্কটি বানাতে হয় তবে আপনি জাভাস্ক্রিপ্টে কোনও ফাংশন ঘোষণা করতে পারেন এবং কিছু মান অতিক্রম করে অনক্লিক এ কল করতে পারেন।

Answer 10

সারণির সারিগুলির উপরে স্বচ্ছ একটি উপাদান রেখে এখানে একটি উপায়। সুবিধাগুলি হ'ল:

• একটি আসল লিঙ্ক উপাদান: হোভার পরিবর্তন পয়েন্টারে, স্থিতি বারে লক্ষ্য লিঙ্ক দেখায়, কীবোর্ড নেভিগেট করা যায়, নতুন ট্যাব বা উইন্ডোতে খোলা যেতে পারে, ইউআরএল অনুলিপি করা যায় ইত্যাদি ইত্যাদি on
• লিঙ্কটি যুক্ত না করে টেবিলটি একই দেখায়
• টেবিল কোড নিজেই কোন পরিবর্তন

অসুবিধা:

• তৈরির সময় এবং এটির আওতায় থাকা সারিটির আকারে যে কোনও পরিবর্তন হওয়ার পরে একটি উপাদানের আকার অবশ্যই কোনও স্ক্রিপ্টে সেট করতে হবে (অন্যথায় এটি কোনও জাভাস্ক্রিপ্টের সাহায্যে সম্পন্ন করা যেত না, যদি টেবিলের আকারও সেট করা থাকে তবে এটি এখনও সম্ভব এইচটিএমএল বা সিএসএসে)

টেবিলটি যেমন রয়েছে:

<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/ (ফায়ারফক্সে কাজ করে তবে আইই বা ক্রোম নয়, লিঙ্কটি ভুল অবস্থানে রয়েছে)

Chrome এবং IE এর জন্য স্থির করা (এখনও এফএফ-তে কাজ করে): http://jsfiddle.net/qo0dx0oo/2/

Comments

চতুর সমাধান। আমি অলসভাবে উপাদানটি তৈরি করতে পেলাম, কেবল একবার সারিটি আটকানো পরে, বড় টেবিলগুলির জন্য বিশাল পারফরম্যান্সের উত্সাহ নিয়ে এসেছিল।

— লেবি

@ লেভি আপনি কীভাবে এটি অলসলোড করবেন সে সম্পর্কে কিছু প্রতিক্রিয়া জানাতে পারেন?

— সাব্লিমিনাল হ্যাশ

@ কেমেলইমিন আমি ধরে নেব যে সে জাভাস্ক্রিপ্টের onmouseover

— ব্র্যাড

Answer 11

আপনি একটি টেবিল সারিটিতে বোতামের ভূমিকাটি যুক্ত করতে পারেন এবং বুটস্ট্র্যাপ কোনও CSS পরিবর্তনে কার্সার পরিবর্তন করবে। খুব সহজ কোড সহ যে কোনও সারি সহজেই ক্লিকযোগ্যযোগ্য করার উপায় হিসাবে আমি সেই ভূমিকাটি ব্যবহার করার সিদ্ধান্ত নিয়েছি।

এইচটিএমএল

<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

বাহ এটি আসলে জকিউরি কোড ছাড়াই ইউআই-সেরেফের পরিবর্তে ডেটা-হেরেফের সাথে কাজ করেছিল। কার্সারটি আঙ্গুলের মধ্যে পরিবর্তন করতে হবে।

— nurp

এটি নির্বিঘ্নে একটি টুন ধন্যবাদ কাজ করেছে

— আশীষ বন্দ্যোপাধ্যায়

Answer 12

এই কোড বেলো আপনার পুরো টেবিলটিকে ক্লিকযোগ্য করে তুলবে। এই উদাহরণে লিঙ্কগুলি ক্লিক করা লিঙ্কটি অনুসরণ না করে সতর্কতা সংলাপে লিঙ্কটি প্রদর্শন করবে।

এইচটিএমএল:

এখানে উপরের উদাহরণের পিছনে এইচটিএমএল রয়েছে:

    <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 এ সেট করা আছে।

Answer 13

খুব সহজ বিকল্পটি হ'ল আমার দৃষ্টিকোণে ক্লিক করুন, এবং আরও সঠিক, কারণ এটি দৃষ্টিভঙ্গি এবং নিয়ামককে পৃথক করে এবং আপনার ইউআরএল বা আপনার আরও কিছু প্রয়োজন যা ক্লিকের সাথে সম্পন্ন করার প্রয়োজন হয় না hard । এটি এনজুলার এনজি-ক্লিকের সাথেও কাজ করে।

<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

অবশ্যই এটি সঠিক উত্তর। অন্যরা এ জাতীয় কোনও সাধারণ কাজের জন্য ক্রেজি জটিল are আপনি যদি মাউস পয়েন্টারটি পরিবর্তন করতে চান তবে আপনি ট্র: হোভার {কার্সার: পয়েন্টার যুক্ত করতে পারেন; CSS আপনার সিএসএস শ্রেণিতে

— টম বন্ধ

@ টমক্লোজ আপনি সারি ক্লিকটি কী করতে চান তার উপর নির্ভর করে এটি সমস্যাযুক্ত হতে পারে যেমন ন্যাভিগেশন স্বাভাবিকভাবে কাজ করবে না - নতুন ট্যাব / উইন্ডোতে খোলার জন্য কোনও শিফট ক্লিক নেই, গন্তব্য ইত্যাদি দেখার জন্য কোনও স্থান নেই, ইত্যাদি

— নেটমেজ

Answer 14

একটি <a>, সিএসএস অবস্থান এবং কিছু jQuery বা জেএস ব্যবহার করে অন্য একটি বিকল্প :

এইচটিএমএল:

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

CSS:

.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

গৃহীত উত্তরটি দুর্দান্ত, তবে আপনি যদি প্রতিটি টিআর-তে ইউআরএলটি পুনরাবৃত্তি করতে না চান তবে আমি একটি ছোট বিকল্প প্রস্তাব করছি। সুতরাং আপনি টেবিলের ডেটা-ইউআরএলটিতে ইউআরএল বা href রেখেছেন এবং টিআর না not

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

এটিও ভাল কারণ আপনার প্রতি টিআর তে ক্লিকের ডেটা অ্যাট্রিবিউট যুক্ত করার দরকার নেই। অন্য ভাল জিনিসটি হ'ল আমরা ক্লাসকে ক্লিক ট্রিগার করতে ব্যবহার করছি না কারণ ক্লাসগুলি কেবল স্টাইলিংয়ের জন্য ব্যবহার করা উচিত।

Answer 19

একটি সমাধান যা পূর্বে উল্লেখ করা হয়নি তা হ'ল এই লিঙ্কটি সেলগুলিতে প্রসারিত করার জন্য একটি ঘরে একটি লিঙ্ক এবং কিছু সিএসএস ব্যবহার করা:

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

এটি বরং মার্জিত দেখাচ্ছে। তবে গুগল লিংক ডেমো কাজ করে না। স্ট্যাকওভারফ্লো এক করে। সম্ভবত গুগল যেমন হয় তেমনি প্রায়ই হয় ses হতে পারে বিংয়ের লিঙ্ক :-) তাদের সঠিকভাবে পরিবেশন করে। যাইহোক v সুন্দর এবং পরিচ্ছন্ন সমাধান।

— BeNice

এটি আমার কাজ করে !! সুন্দর সমাধান। একটি বিষয় লক্ষণীয় যে এর জন্য প্রস্থ: এর আগে সারণীটি আবরণ করার জন্য যথেষ্ট দীর্ঘ হতে হবে।

— আর্স্ট

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. শুধুমাত্র এইচটিএমএল / সিএসএস ব্যবহার করুন। এর অর্থ <a>প্রত্যেকের নীচে বাসা বাঁধে <td>। এই ফিডলের মতো একটি সহজ পদ্ধতির কাজ করে না - কারণ ক্লিকযোগ্য পৃষ্ঠতল প্রতিটি কলামের জন্য অগত্যা সমান নয়। এটি একটি গুরুতর ইউএক্স উদ্বেগ। এছাড়াও, যদি আপনার <button>সারিতে একটি প্রয়োজন হয় তবে এটি <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%;
   }

   এটি কাজ করে, তবে ক্রোম এবং ফায়ারফক্সের মধ্যে অসঙ্গতির কারণে পার্থক্যগুলি কাটিয়ে উঠতে ব্রাউজার-নির্দিষ্ট হ্যাকের প্রয়োজন requires এছাড়াও ক্রোম সর্বদা কোষের সামগ্রী শীর্ষে সারিবদ্ধ করে রাখে, যা দীর্ঘ পাঠগুলির ক্ষেত্রে সমস্যা সৃষ্টি করতে পারে, বিশেষত যদি ভিন্ন লাইন উচ্চতায় জড়িত থাকে।

   খ) সেট <td>করা { display: contents; }। এটি 2 টি অন্যান্য সমস্যার দিকে পরিচালিত করে:

   B1। যদি অন্য কেউ সরাসরি <td>ট্যাগটি সেট করার মতো স্টাইল করার চেষ্টা করে তবে { width: 20px; }আমাদের সেই স্টাইলটি কোনওভাবে <a>ট্যাগটি পাস করতে হবে । এটি করতে আমাদের কিছু জাদু দরকার, জাভাস্ক্রিপ্ট বিকল্পের চেয়ে সম্ভবত আরও বেশি যাদু।

   B2। { display: contents; }এখনও পরীক্ষামূলক; বিশেষত এটি এজ তে সমর্থিত নয়।

   গ) সেট <td>করা { height: --some-fixed-value; }। এটি কেবল যথেষ্ট নমনীয় নয়।

3. শেষ পদ্ধতির, যা আমি গুরুত্ব সহকারে চিন্তা করার পরামর্শ দিচ্ছি তা হল ক্লিকযোগ্য সারিগুলি ব্যবহার না করা । ক্লিকযোগ্যযোগ্য সারিগুলি একটি দুর্দান্ত ইউএক্স অভিজ্ঞতা নয়: এগুলি দৃশ্যত ক্লিকযোগ্য হিসাবে চিহ্নিত করা সহজ নয় এবং বোতামগুলির মতো সারিগুলির মধ্যে একাধিক অংশ ক্লিকযোগ্য হলে এটি চ্যালেঞ্জ তৈরি করে। সুতরাং একটি ব্যবহার্য বিকল্প হতে পারে <a>কেবল প্রথম কলামে একটি ট্যাগ থাকতে পারে , নিয়মিত লিঙ্ক হিসাবে প্রদর্শিত হয় এবং এটি পুরো সারিটি নেভিগেট করার ভূমিকা দেয়।

Answer 22

এখানে অন্য উপায় ...

এইচটিএমএল:

<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

কীভাবে আমরা এটি নতুন ট্যাবে খুলতে পারি? @ ক্লেউইস

— খুশবু

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>

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

</div>

Comments

আপনার উত্তরটি সিএসএস প্রদর্শনের মাধ্যমে উন্নত করা উচিত: টেবিল

— এম 1 সিডি

সিএসএস যুক্ত করে উত্তরটি উন্নত করুন

— প্রথমেশেশ আরও