首页 文章

html - 表格行像链接

提问于
浏览 次
94

我不能将我的表行设置为某些东西的链接 . 我只能使用css和html . 我尝试了不同的东西，从div到另一个，但仍然不能使它工作 .

html css hyperlink html-table

15 回答

  • 0

    这样可以节省您在tr中复制链接的麻烦 - 只需将其从第一个中删除即可 .

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

    您有两种方法可以做到这一点：

    • 使用javascript：

    <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

    回复于
  • 52

    我自己做了一个自定义的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同意使用数据attr . 编辑上面的回答

    回复于
  • 1

    如果您使用的是支持它的浏览器，则可以使用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> 混在一起

    回复于
  • 4

    通常的方法是将一些JavaScript分配给 TR 元素的 onClick 属性 .

    如果你不能使用JavaScript，那么你必须使用一个技巧：

    • 向同一行的每个 TD 添加相同的链接（该链接必须是单元格中最外层的元素） .

    • 将链接转换为块元素： a { display: block; width: 100%; height: 100%; }

    后者将强制链接填充整个单元格，因此单击任意位置将调用链接 .

    回复于
  • 164

    如果必须使用表，可以在每个表格单元格中放置一个链接：

    <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> 而不是表格，那么您的HTML可以更加简单，并且您不会在表格单元格之间的链接中获得"gaps"：

    <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> 方法一起使用的CSS：

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

    您不能使用 <a> 标记包装 <td> 元素，但可以使用 onclick 事件来调用函数来完成类似的功能 . 找到一个例子here，就像这个函数：

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

    并将它添加到您的表中，如下所示：

    <tr onclick="DoNav('http://stackoverflow.com/')"><td></td></tr>
    回复于
  • 6

    来自sirwilliam的回答最适合我 . 我改进了Javascript，支持热键Ctrl LeftClick（在新选项卡中打开页面） . 事件 ctrlKey 由PC使用， 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;
    }
});

    Example

    http://jsfiddle.net/vlastislavnovak/oaqo2kgs/

    回复于
  • 26

    我知道这个问题已经回答了，但我仍然不喜欢这个页面上的任何解决方案 . 对于使用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 现在，您可以在HTML中的任何 <tr> 元素上使用它

    <tr url="example.com">
    <td>value</td>
    <td>value</td>
    <td>value</td>
<tr>
    回复于
  • 12

    当我想用链接模拟 <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上时，所有行（和这个链接）都获得悬停样式，他看不到有多个链接 .

    希望可以帮助别人 .

    小提琴HERE

    回复于
  • 1
    //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）可点击的唯一方法 .

    除非您有一个单元格，其中有一个填充整个单元格的锚标记 .

    然后，你无论如何都不应该使用表格 .

    回复于
  • 12

    在阅读了这个帖子和其他一些内容之后，我在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表现为带有display：table;的div这样的链接，它们不会是键盘可选的或具有状态文本 . 编辑：我通过设置onkeydown，role和tabIndex使键盘导航工作，如果只需要鼠标，你可以删除该部分 . 但是，在悬停时，它们不会在状态栏中显示URL .

    您可以使用“tr [href]”CSS选择器专门设置链接TR的样式 .

    回复于
  • 0

    我有另一种方式 . 特别是如果你需要使用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";
    });
});

    设置变量在SESSIONS中设置变量，您要访问的页面可以读取和操作 .

    我真的很喜欢直接发布到窗口位置的方式，但我不认为这是可能的 .

    回复于
  • 0

    谢谢你 . 您可以通过为行分配CSS类来更改悬停图标，如：

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

    CSS看起来像：

    <style>
    .pointer { cursor: pointer; }
</style>
    回复于
  • -2

    你可以在行中添加A标签吗？

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

    这是你要问的吗？

    回复于

相关问题