如何为表格行<tr>添加超链接

Question

我创建了一个表格，但无法使HTML链接工作，我想将其包含在表行中。

<table class="list" border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<th width="10%"></th>
<th width="30%">Titel</th>
<th width="20%">Typ</th>
<th width="10%">Jahr</th>
<th width="14%">Anzahl</th>
<th width="8%"><img title="Dub" src="IMG" alt="Dub" /></th>
<th width="8%"><img title="Sub" src="IMG" alt="Sub" /></th>
</tr>
<td><img src="IMG" alt="" /></td>
<td style="padding-top: 15px;">XYXYXYXYXY</td>
<td style="padding-top: 15px;">XCXYX</td>
<td style="padding-top: 15px;">XYXYX</td>
<td style="padding-top: 15px;">XXXXX</td>
<td style="padding-top: 15px;"><img src="XYXYXYXYXY" alt="" /></td>
<td style="padding-top: 15px;"><img src="XYXYXYXYXY" alt="" /></td>
</tr>
<td><img src="XYXYXYXYXY" alt="" /></td>
<td style="padding-top: 15px;">XYXYXYXYXY</td>
<td style="padding-top: 15px;">XYXYXYXYXY</td>
<td style="padding-top: 15px;">XXXXX</td>
<td style="padding-top: 15px;">XYXYX</td>
<td style="padding-top: 15px;"><img src="XYXYXYXYXY" alt="" /></td>
<td style="padding-top: 15px;"><img src="XYXYXYXYXY" alt="" /></td>
</tr>
</tbody>
</table>

一个小例子：http://jsfiddle.net/pjPTd/

我尝试使用jQuery，但是无法让它正常工作。

- user3850699

---

什么是问题？我没有看到链接。 - Jay Blanchard

你的情景是什么？你想要实现什么？ - Rumen Jekov

你所说的“clickable”是什么意思？是指重定向到另一个页面吗？还是只是改变颜色以表示已被点击？同时，打开和关闭<tr>标签不匹配可能会影响不同浏览器的显示。 - pms

首先，你的HTML无效。你关闭了第一行，但是你没有为第二行或第三行打开一个新的<tr>标签。 - Jeff

如果您查看他的fiddle，当您将鼠标悬停在行上时，它们会突出显示。我认为他希望整行都有超链接。 - Lei-Lonnie

Answer 1

为了使表格行可点击，请将 href 放置在行标签内：

<tr href="http://www.example.com">

然后使用这个 jQuery：FIDDLE

$(document).ready(function(){
    $('table tr').click(function(){
        window.location = $(this).attr('href');
        return false;
    });
});

- Lei-Lonnie

---

这正是我在寻找的，你能告诉我在 WordPress CMS 中在哪里添加 jQuery 代码吗？ - user3850699

请参考以下问题的答案：https://dev59.com/mmgu5IYBdhLWcg3wrYwl - Lei-Lonnie

Answer 2

您的问题并不清楚， 如果您想在表格单元格中添加链接，可以简单地使用<a>标签，如下所示：

<a href="http://google.com"> click to visit google </a>

在标签中添加这个内容，你将得到一个链接，可以带你到Google。

下一次请确保你的问题清晰明了，通用性强，这样其他人也可以使用。

更新：

如果你指的是可点击的按钮，那么你应该访问W3Schools的按钮标签。

- Fanckush

Answer 3

为每一行添加一个类和一个href。

<tr class='js-clickable' href='http://www.ebay.com'>

然后创建一个点击事件，获取 URL，并最终将用户重定向到该链接。

$('.js-clickable').on('click', function() {

  var URL = $(this).attr("href"); 

  alert('you will be redirected to' + ' ' + redirectURL);

  window.document.location = URL;

});

这是一个FIDDLE。

- Aaron

Answer 4

使用以下代码将超链接添加到表格行中： <tr> <td><a href="http://google.com">点击访问谷歌</a></td> </tr>

- upendra tiwari