Question

如何将整个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内的跨度成为一个链接，帮助大声笑。

Answer 1

使用CSS。

<style type="text/css">
td a { display: block; width: 100%; height: 100%; }
</style>

<td><a href="#">Link</a></td>

CSS强制链接扩展到TD的整个宽度和高度。

Answer 2

您无法将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>

Answer 3

在td中添加锚标记，并将其display属性设置为block。这应该使整个td可以点击。

#blue-border a{
    display: block;
}

或

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

Answer 4

为td：

定义OnClick事件

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

Answer 5

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

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

如果你想让鼠标成为一个指针，你可以在那里抛出一个简单的CSS样式：

#cell123:hover { cursor: pointer; }

Answer 6

<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

如何使整个td成为链接？

6 个答案: