如何使整个td成为链接？

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 内的 span 变成链接，请帮帮我。

- user784637

---

你想做什么？为什么表格单元格必须是可链接的？ - kdub

然后它就像一个巨大的按钮，非常适合移动设备。 - Demis

我同意原帖的观点 - 没有任何解决方案可以使整个TD（包括TD的填充/边距）可点击！ onclick = 方法可能有效，但是还没有人提供制作超链接的工作示例。 - Demis

Answer 1

使用CSS。

td a { display: block; width: 100%; height: 100%; }

<table style="width: 100%">
  <tr>
    <td><a href="#">Link</a></td>
  </tr>
</table>

CSS代码会让链接元素的宽度和高度扩展至所在单元格的整个空间。

- Will Martin

---

@LedZeppelin 这是一个演示：http://jsfiddle.net/upBDc/ ... 你的代码可能出现了很多问题。 你有链接吗？ - Will Martin

当td的高度被明确指定时，此方法有效，但如果高度是由行中的其他元素决定的，则无效：http://jsfiddle.net/ypj10jyj/2/ - idupree

这不会将 <a> 扩展到 td 的边距/填充 - 它们无法被单击。 - Demis

自然不会。内容不会扩展到填充区域。如果您需要<a>的可点击区域延伸到边缘，那么您需要删除<td>上的任何填充。 - Will Martin

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>

- John Kalberer

---

制作 <td> 超链接到 URL 的语法是什么？看起来这个例子运行了一些未定义的函数，可能改变了颜色，而不是创建超链接。 - Demis

Answer 3

在td标签内添加一个锚点标签，并将其显示属性设置为块级元素。这样可以使整个td区域可点击。

#blue-border a{
    display: block;
}

或者

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

- rolling stone

Answer 4

如果你只是要触发 JavaScript，我建议你在第一次使用时使用 onclick 而不是锚标签，例如：

如果您只是在执行 JavaScript，请考虑在第一时间使用 onclick 而不是锚标签，如下所示：

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

如果您希望鼠标变成一个指针，您可以在那里添加一个简单的CSS样式：

#cell123:hover { cursor: pointer; }

- Joe Enos

---

chooseStyle() 如何对应将 TD 设置为可点击的超链接到 URL？ - Demis

Answer 5

<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');
    });
});

Check here: jsFiddle.net

- Marco Hurtado

Answer 6

为td定义OnClick事件：

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

- n8wrl

---

当你这样做时会发生什么？ - n8wrl

如何将<td>转换为超链接并指向一个URL？请提供相应的语法。 - Demis

Answer 7

使用带有类的jQuery
$("tr td.data_col").click(function() { window.location = $(this).find('a').attr("href"); });

- sumac2003