ฉันไม่สามารถตั้งค่าแถวตารางเป็นลิงก์ไปยังบางสิ่งได้ ฉันสามารถใช้ได้เฉพาะ css และ html ฉันลองสิ่งที่แตกต่างจาก div ในแถวไปยังสิ่งอื่น แต่ก็ยังไม่สามารถใช้งานได้

คุณมีสองวิธีในการดำเนินการนี้:

• ใช้จาวาสคริปต์:

  <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

ฉันสร้างฟังก์ชัน jquery ที่กำหนดเองด้วยตัวเอง:

Html

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

jQuery

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

ง่ายและสมบูรณ์แบบสำหรับฉัน หวังว่ามันจะช่วยคุณได้

(ฉันรู้ว่า OP ต้องการ CSS และ HTML เท่านั้น แต่พิจารณา jQuery)

แก้ไข

เห็นด้วยกับ Matt Kantor โดยใช้ data attr. แก้ไขคำตอบด้านบน

หากคุณใช้เบราว์เซอร์ที่รองรับคุณสามารถใช้ CSS เพื่อเปลี่ยน<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>

หากคุณต้องใช้ตารางคุณสามารถใส่ลิงค์ลงในเซลล์ตารางแต่ละเซลล์:

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

นี่คือ CSS ที่มาพร้อมกับ<div>วิธีการ:

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

วิธีปกติคือกำหนด JavaScript ให้กับonClickแอตทริบิวต์ของTRองค์ประกอบ

หากคุณไม่สามารถใช้ JavaScript ได้คุณต้องใช้เคล็ดลับ:

1. เพิ่มลิงก์เดียวกันลงในแต่ละTDแถวเดียวกัน (ลิงก์ต้องเป็นองค์ประกอบด้านนอกสุดในเซลล์)

2. เปลี่ยนลิงค์เป็นองค์ประกอบบล็อก: a { display: block; width: 100%; height: 100%; }

ส่วนหลังจะบังคับให้ลิงก์เติมเต็มเซลล์ดังนั้นการคลิกที่ใดก็ได้จะเป็นการเรียกลิงก์

คุณไม่สามารถรวม<td>องค์ประกอบด้วย<a>แท็ก แต่คุณสามารถใช้ฟังก์ชันที่คล้ายกันได้โดยใช้onclickเหตุการณ์เพื่อเรียกใช้ฟังก์ชัน พบตัวอย่างที่นี่เช่นฟังก์ชันนี้:

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

และเพิ่มลงในตารางของคุณดังนี้:

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

คำตอบจาก sirwilliam เหมาะกับฉันที่สุด ฉันปรับปรุง Javascript ด้วยการสนับสนุนปุ่มลัด Ctrl + LeftClick (เปิดหน้าในแท็บใหม่) เหตุการณ์ctrlKeyถูกใช้โดยพีซีmetaKeyโดย Mac

Javascript

$('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/

ฉันรู้ว่าคำถามนี้มีคำตอบแล้ว แต่ฉันยังไม่ชอบวิธีแก้ปัญหาใด ๆ ในหน้านี้ สำหรับผู้ที่ใช้ JQuery ฉันได้สร้างวิธีแก้ปัญหาขั้นสุดท้ายซึ่งช่วยให้คุณสามารถให้แถวในตารางมีลักษณะการทำงานเหมือนกับ<a>แท็ก

นี่คือทางออกของฉัน:

jQuery คุณสามารถเพิ่มตัวอย่างนี้ลงในไฟล์ javascript ที่รวมมาตรฐานได้

$('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>

เมื่อฉันต้องการจำลอง<tr>ด้วยลิงก์ แต่เคารพมาตรฐาน html ฉันจะทำสิ่งนี้

HTML:

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

CSS:

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

ด้วยวิธีนี้เมื่อมีคนใช้เมาส์ของเขาบน TR ทุกแถว (และลิงก์นี้) จะได้รับลักษณะโฮเวอร์และเขาไม่เห็นว่ามีลิงก์หลายลิงก์

หวังว่าจะช่วยใครสักคนได้

ซอที่นี่

วิธีนี้ช่วยให้คุณไม่ต้องทำซ้ำลิงก์ใน tr - เพียงแค่ดึงมันออกจาก a ตัวแรก

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

//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) ได้

เว้นแต่คุณจะมีเซลล์เดียวที่มีแท็กจุดยึดที่เติมทั้งเซลล์

จากนั้นคุณไม่ควรใช้ตาราง แต่อย่างใด

หลังจากอ่านหัวข้อนี้และอื่น ๆ ฉันได้หาวิธีแก้ไขปัญหาต่อไปนี้ใน javascript:

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 แล้ว (โดยการจัดวางหรือใช้ตัวจัดการเหตุการณ์)

ข้อเสียคือมันจะไม่ทำให้ TR ทำงานเป็นลิงก์เหมือนกับ div โดยสิ้นเชิงdisplay: table;และจะไม่สามารถเลือกแป้นพิมพ์หรือมีข้อความแสดงสถานะได้แก้ไข: ฉันทำให้การนำทางแป้นพิมพ์ทำงานได้โดยการตั้งค่า onkeydown, role และ tabIndex คุณสามารถลบส่วนนั้นออกได้หากจำเป็นต้องใช้เมาส์เท่านั้น พวกเขาจะไม่แสดง URL ในแถบสถานะเมื่อวางเมาส์

คุณสามารถจัดรูปแบบให้กับลิงก์ TR โดยเฉพาะด้วยตัวเลือก CSS "tr [href]"

ฉันมีวิธีอื่น โดยเฉพาะอย่างยิ่งถ้าคุณต้องการโพสต์ข้อมูลโดยใช้ 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";
    });
});

Set variable ตั้งค่าตัวแปรใน SESSIONS ซึ่งหน้าที่คุณกำลังจะอ่านและดำเนินการได้

ฉันต้องการวิธีการโพสต์ตรงไปยังตำแหน่งหน้าต่าง แต่ฉันไม่คิดว่าจะเป็นไปได้

ขอบคุณสำหรับสิ่งนี้. คุณสามารถเปลี่ยนไอคอนโฮเวอร์ได้โดยกำหนดคลาส CSS ให้กับแถวเช่น:

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

และ CSS ดูเหมือนว่า:

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

คุณสามารถเพิ่มแท็กในแถวได้หรือไม่?

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

นี่คือสิ่งที่คุณกำลังถามใช่ไหม