এইচটিএমএল - লিঙ্কের মতো টেবিল সারি

Question

আমি কোনও কিছুর লিঙ্ক হিসাবে আমার টেবিল সারিটি সেট করতে পারি না। আমি কেবল সিএসএস এবং এইচটিএমএল ব্যবহার করতে পারি। আমি ডিভ থেকে শুরু করে অন্য কিছুতে বিভিন্ন জিনিস চেষ্টা করেছি, তবে এখনও এটি কার্যকর হতে পারে না।

Answer 1

এটি করার জন্য আপনার দুটি উপায় রয়েছে:

• জাভাস্ক্রিপ্ট ব্যবহার:

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

এখানে দ্বিতীয় উদাহরণটির একটি সাধারণ ডেমো রয়েছে: ডেমো

Comments

যেহেতু ওপি বলেছিল "কেবল সিএসএস এবং এইচটিএমএল" আমি ধরে নিচ্ছি গ্রহণটি দ্বিতীয় উত্তরের জন্য ছিল। মনে রাখবেন যে আপনার সীমানা = 0 না থাকলে আপনি টেবিলের ঘরগুলির মধ্যে একটি "মিসিং লিঙ্ক" ফাঁক পাবেন get

— সিস্টেম PAUSE

আইআইআরসি সারণি কক্ষগুলি সবেমাত্র ভেঙে ফেলতে হবে, তবে একটি সীমানা থাকতে পারে।

— এস্তেবান কাবার

<a> ট্যাগ এর অভ্যন্তরে অন্য কোনও এইচটিএমএল উপাদানকে অনুমতি দেয় না। তারপরে, আমরা কীভাবে একটি সম্পূর্ণ টেবিল সারিতে লিঙ্ক করব যাতে আরও সারণী ডেটা রয়েছে? এর মতো কিছু: <tr> <a href=" "> <td> পাঠ্য </<> <td> ..... </a> </tr> .. আমরা এই নে পছন্দ করতে পারি না?

— আবিমরণ কুগাথসন

আমি ব্লকের পরিবর্তে "প্রদর্শন: ইনলাইন-ব্লক" ব্যবহার করার পরামর্শ দেব। ব্লক প্রদর্শন সহ, আমি দেখতে পেয়েছি যে ক্রোম "উচ্চতা: 100%" উপেক্ষা করছে এবং প্রকৃতপক্ষে <td> ক্লিক-সক্ষমের পুরো উচ্চতা তৈরি করছে না যদি একই সারিতে আরও আইটেম রয়েছে যেগুলির উচ্চতা বেশি থাকে। এটিকে ইনলাইন-ব্লক তৈরি করা সমস্যার সমাধান করেছে এবং টেবিলের উপাদানগুলির মধ্যে টেক্সট ক্লিপ হওয়ার সম্ভাব্য কোনও সমস্যা।

— ord

অ্যাঙ্করগুলির এখনও কলামগুলির মধ্যে ডেড স্পেস রয়েছে (গুগল ক্রোম সংস্করণ 40.0.2214.115 মি দিয়ে পরীক্ষিত)

— ইউরি

Answer 2

আমি নিজেকে একটি কাস্টম jquery ফাংশন তৈরি করেছি:

এইচটিএমএল

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

jQuery এর

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

আমার জন্য সহজ এবং নিখুঁত। আশা করি এটি আপনাকে সহায়তা করবে।

(আমি জানি ওপি কেবল সিএসএস এবং এইচটিএমএল চায়, তবে jQuery বিবেচনা করুন)

সম্পাদন করা

ডেটা অ্যাটর ব্যবহার করে ম্যাট ক্যান্টরের সাথে সম্মত। উপরে সম্পাদিত উত্তর

Comments

আসলে এটি বেশ মার্জিত। আমি ডাব্লু 3 সি স্ট্যান্ডার্ড দ্বারা এটি অবৈধ এইচটিএমএল হিসাবে বিবেচিত হলে আমি অবাক হই।

— মাহন

আমি ব্যবহার করতাম data-hrefবা somesuch।

— ম্যাট ক্যান্টর

জেএসফিডাল লিঙ্কটি 404

— পৌঁছেছে

ক্লাস যুক্ত করুন <table class='tr_link' >এবং .tr_link{cursor:pointer}সেরা ব্যবহারের জন্য সিএসএসে দিন।

— বাগোভা

tr[data-href] { cursor: pointer }

— হাওরিংয়ের

Answer 3

আপনি যদি এমন কোনও ব্রাউজারে থাকেন যা এটি সমর্থন করে তবে আপনি এটিকে <a>টেবিলের সারিতে রূপান্তর করতে CSS ব্যবহার করতে পারেন :

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

Comments

দুর্দান্ত ধারণা, ধন্যবাদ! মনে হচ্ছে এটি অপেরা 8.5 / , ফায়ারফক্স 0.8 / , আইই 8, আইফোন সিমুলেটর / সাফারি / খুব পুরানো :)

— বাইজিক্লোপ

এটিই সেই কৌশলটি হওয়া উচিত যা সিএসএস টেবিলগুলি সমস্ত বর্তমান ব্রাউজার দ্বারা সমর্থিত হয়: ক্যানিউজ.com / #feat=css-table একমাত্র সমস্যা হ'ল আমি এটি বুটস্ট্র্যাপের সাথে ব্যবহার করতে পারি না! : '(

— শ্যাঙ্গজিয়াও

Answer 4

আপনি যদি আছে একটি টেবিল ব্যবহার করেন, আপনি প্রতিটি টেবিলের কোষে কোন লিঙ্ক রাখা পারেন:

<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>টেবিলের পরিবর্তে গুলি ব্যবহার করতে সক্ষম হন তবে আপনার এইচটিএমএল অনেক সহজ হতে পারে এবং আপনি টেবিলের ঘরের মধ্যে লিঙ্কগুলিতে "ফাঁক" পাবেন না:

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

Comments

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

— গুলিমা

Answer 5

সাধারণ উপায় হ'ল উপাদানটির onClickবৈশিষ্ট্যে কিছু জাভাস্ক্রিপ্ট বরাদ্দ করা TR।

আপনি যদি জাভাস্ক্রিপ্ট ব্যবহার করতে না পারেন তবে আপনাকে অবশ্যই একটি কৌশল ব্যবহার করতে হবে:

1. TDএকই সারির প্রত্যেকটিতে একই লিঙ্ক যুক্ত করুন (লিঙ্কটি অবশ্যই ঘরের সবচেয়ে বাহ্যিক উপাদান হতে হবে)।

2. লিঙ্কগুলিকে ব্লক উপাদানগুলিতে পরিণত করুন: a { display: block; width: 100%; height: 100%; }

পরেরটি লিঙ্কটিকে পুরো ঘরটি পূরণ করতে বাধ্য করবে তাই যে কোনও জায়গায় ক্লিক করলে লিঙ্কটি ডেকে আনা হবে।

Answer 6

আপনি <td>কোনও <a>ট্যাগ দিয়ে কোনও উপাদান মোড়ানো করতে পারবেন না , তবে onclickইভেন্টটি কোনও ফাংশন কল করার জন্য আপনি অনুরূপ কার্যকারিতা অর্জন করতে পারেন । একটি উদাহরণ পাওয়া যায় এখানে , এই ফাংশন ভালো কিছু:

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

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

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

Comments

এই জাতীয় উদ্দেশ্যটির জন্য অনক্লিক ব্যবহারে অন্যতম সমস্যা হ'ল ব্যবহারকারীরা আর নতুন মাউসের বোতামটি ব্যবহার করতে বা একটি নতুন ট্যাবে লিঙ্কগুলি খুলতে নিয়ন্ত্রণ-ক্লিক করতে পারবেন না (যা আমাদের মধ্যে যারা লিঙ্কগুলি খোলার পক্ষে পছন্দ করে তাদের জন্য সত্যিই হতাশার কারণ হতে পারে) । অন্য একটি পক্ষের নোট, কেবল একটি সাধারণ কমান্ড করে এমন একটি ফাংশন তৈরি করে জিনিসগুলিকে জটিল করার কোনও কারণ নেই। আপনি যদি এটি করতে চলেছেন তবে সরাসরি "দস্তাবেজ.লোকেশন.ড্রেফ = ..." সরাসরি অনক্লিক বৈশিষ্ট্যে রেখে দিন।

— অর্ডার

Answer 7

সিরওয়িলিয়ামের উত্তর আমার সেরা ফিট করে। হটকি সিটিআরএল + বাম ক্লিকের (নতুন ট্যাবে পৃষ্ঠা খোলে) সমর্থন করে আমি জাভাস্ক্রিপ্ট উন্নত করেছি। ইভেন্ট 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/

Comments

ভাল. Ctrl + বাম ক্লিক ক্লিক করুন UIX

— ইউরি

এখনও হারাচ্ছে 'ডান ক্লিক -> একটি নতুন ট্যাবে খুলুন' বা 'একটি নতুন উইন্ডোতে খুলুন'

— জেজি ইন্টারন্যাশনাল

Answer 8

আমি জানি এই প্রশ্নের উত্তর ইতিমধ্যে দেওয়া হয়েছে তবে আমি এখনও এই পৃষ্ঠার কোনও সমাধান পছন্দ করি না। যে সকল লোকেরা 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;
    }
});

এইচটিএমএল এখন আপনি এটি <tr>আপনার HTML এর ভিতরে যে কোনও উপাদান ব্যবহার করতে পারেন

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

Comments

খাঁটি জেএসের কাছাকাছি 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; } });

— রামন বক্কার 21

2014 সালে যা ভ্যানিলা জেসে পাওয়া যায় নি , আপনি ব্রাটকে ক্ষতিগ্রস্থ করলেন; পি।

— বোটেনউউভার

Answer 9

আমি যখন <tr>কোনও লিঙ্ক সহ একটি অনুকরণ করতে চাই তবে এইচটিএমএল মানকে সম্মান করি, আমি এটি করি।

এইচটিএমএল:

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

এইভাবে, যখন কেউ তার মাউসকে টিআর দিয়ে যায়, সমস্ত সারি (এবং এই লিঙ্কগুলি) হোভার শৈলী পায় এবং সে দেখতে পাবে না যে সেখানে একাধিক লিঙ্ক রয়েছে।

আশা কাউকে সাহায্য করতে পারে।

ফিডল এখানে

Answer 10

এটি আপনাকে টিআর লিঙ্কটির সদৃশ করতে বাঁচায় - এটিকে প্রথম এ থেকে বের করুন।

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

Answer 11

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

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

এই লাইন বরাবর কিছু সম্ভবত? যদিও এটি জেএস ব্যবহার করে না, তবে এটি সারি (টিআর) ক্লিকযোগ্যযোগ্য করার একমাত্র উপায়।

যদি না আপনার কাছে একটি অ্যাঙ্কর ট্যাগ সহ একটি ঘর থাকে যা পুরো ঘরটি পূরণ করে।

এবং তারপরে, আপনার কোনওভাবে কোনও টেবিল ব্যবহার করা উচিত নয়।

Answer 12

এই থ্রেড এবং আরও কয়েকজন পড়ার পরে আমি জাভাস্ক্রিপ্টে নিম্নলিখিত সমাধান নিয়ে এসেছি:

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

এটা করা ব্যবহার করার জন্য সূরা মধ্যে TR / TD / তম আপনার মত যোগ্য থাকতে চায়: <tr href="http://stackoverflow.com">। এবং নিশ্চিত করুন যে উপরের স্ক্রিপ্টটি ত্রি উপাদান তৈরির পরে কার্যকর করা হয়েছে (এর অবস্থান নির্ধারণ বা ইভেন্ট হ্যান্ডলারগুলি ব্যবহার করে)।

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

আপনি বিশেষত "টিআর [href]" সিএসএস নির্বাচকের সাথে টিআর লিঙ্কটি স্টাইল করতে পারেন।

Answer 13

আমার আর একটি উপায় আছে বিশেষ করে যদি আপনার 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";
    });
});

সেশনগুলিতে ভেরিয়েবল সেট আপ করুন যা আপনি যে পৃষ্ঠাতে যাচ্ছেন সেটি পড়তে এবং তার উপরে অভিনয় করতে পারে।

আমি সরাসরি একটি উইন্ডো লোকেশন পোস্ট করার একটি উপায় চাই, কিন্তু আমি এটি সম্ভব বলে মনে করি না।

Answer 14

এর জন্য ধন্যবাদ. আপনি এই জাতীয় সারিতে একটি সিএসএস ক্লাস বরাদ্দ করে হোভার আইকনটি পরিবর্তন করতে পারেন:

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

এবং CSS এর মতো দেখাচ্ছে:

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

Answer 15

আপনি কি সারিতে একটি ট্যাগ যুক্ত করতে পারেন?

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

এই আপনি কি জিজ্ঞাসা করছেন?

Comments

না, আমার সমস্ত সারি-অঞ্চল অনুসন্ধান করতে হবে।

— ম্যাক্স ফ্রেই