如何使整个td成为一个链接

How to make entire td a link?

本文关键字：一个 链接 何使整 td      更新时间：2023-09-26

如何使整个td成为链接？

<td id="blue-border"><span id="blue"></span></td>

点击td应该会让它表现成这样（我知道这在语法上是不正确的：

<a href="javascript:chooseStyle('blue-theme', 360)"> <td id="blue-border"><span id="blue"></span></td> </a>

编辑：到目前为止，所有的建议都只是让td内的跨度成为一个链接，帮助lol。

使用CSS。

td a { display: block; width: 100%; height: 100%; }
<table style="width: 100%">
  <tr>
    <td><a href="#">Link</a></td>
  </tr>
</table>

CSS强制链接扩展到TD的全宽和全高。

不能将td包装在锚点中。这样做：

<td id="blue-border"><a href="javascript:chooseStyle('green-theme', 360)"> <span id="blue"></span></a></td>

或

<td onclick="chooseStyle('green-theme', 360)" id="blue-border"><span id="blue"></span></td>

在td内部添加一个锚点标记，并将其显示属性设置为block。这应该使整个td都可以点击。

#blue-border a{
    display: block;
}

或

<a href="link" style="display:block;">

为td:定义OnClick事件

<td id="blue-border" onclick="chooseStyle('blue-theme', 360)">...

如果您所要做的只是激发javascript，我建议首先使用onclick而不是锚标记，例如：

<td id="cell123" onclick="chooseStyle('green-theme',360)">cell contents</td>

如果你想让鼠标变成指针，你可以在上面扔一个简单的css样式：

#cell123:hover { cursor: pointer; }

<table width="100%" class="blueCss">
    <tr>
        <td ID="tdBlue">
            <span id="Blue">Hello</span>
        </td>  
        <td>
            <span>other col</span>
        </td>
     </tr>
</table>

css文件：

.blueCss {
        height: 100px;
        width: 100px;
    }
    .blueCss td {
        background-color: blue;
    }
    .blueCss:hover    {
        border-color: #00ae00;
    }
    .blueCss td:hover    {
        background-color: yellow;
        cursor: pointer;
    }

jQuery代码：


$(document).ready(function(){
    var tdLink = $('#tdBlue');
    tdLink.click(function(){
         alert('blue-theme');
    });
});

查看此处：jsFiddle.net

将jquery与类一起使用
$("tr td.data_col").click(function() { window.location = $(this).find('a').attr("href"); });

相关文章：