What is the most standard and compatible way to make a whole table row into a link?_问答_开发者

What is the most standard and compatible way to make a whole table row into a link?

开发者 https://www.devze.com 2022-12-30 20:39 出处：网络

Obviously you can\'t just surround the <tr> tag with an <a> tag and call it a day; this is invalid and doesn\'t ev开发者_运维百科en work. I have seen JavaScript used, but then what happens

Obviously you can't just surround the <tr> tag with an <a> tag and call it a day; this is invalid and doesn't ev开发者_运维百科en work. I have seen JavaScript used, but then what happens to browsers that don't support JavaScript? What is the best way to make an entire table row <tr> into a link?

Edit: At the request of Lerxst, here is an example of a table with some rows:

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

My preference would be to put a link in the most logical cell for it (probably the name), then add an event handler along the lines of:

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

Non-JS clients would still be able to use the regular link.

More efficiently, attach the event handler to the table and use the event object to find the element with the click and then climb up the tree of parents until it hit a row. This is probably best achieved with a library such as YUI or jQuery.

Without Javascript support, you simply can't. A link is a link, and a table row is a table row (that is, an <a> is an <a> and a <tr> is a <tr>). Table rows and most other markup elements have no "natural" link-like behavior. The best you can do is fill all your table cells with <a> tags around the content. edit: Note that you would want to tweak the styles so that the <a> tags are laid out such that they completely fill the table cells; maybe make them display: block for starters.

Or you could use Javascript.

If you are willing to forego the TABLE, the below solution is the most simple and doesn't require JavaScript:

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

LINK

pretty much you give the appearance of having the row act as a link, by having CSS change colors to represnt links and create on mouse over and on click events that react and redirect to the appropriate change, the link eplains how to do that

the fallback could be add a tag link to the code if JS is not available, that way people without JS can still use the link included in the row. so you have a fallback option

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