Question

下面是简单/示例表。问题在于我如何 为我需要的特定表格单元格 添加链接。例如，当我 点击表格“第1行，第1行” 的第一个单元格时，它将 执行链接并跳转到下一个网站 。

<table border="1">
     <tr>
         <td>row 1, cell 1</td>
         <td>row 1, cell 2</td>
     </tr>
     <tr>
         <td>row 2, cell 1</td>
         <td>row 2, cell 2</td>
     </tr>
 </table>

感谢分享。

Answer 1

您需要a标记：

<td><a href="example.com">row 1, cell 1</a></td>

只需将href值替换为您尝试链接的任何网站。

jQuery更新：

如果您尝试使用jQuery，首先需要在所需的td（例如类或序号位置）中添加某种唯一标识符/选择器，然后添加锚标记。我们现在就叫td选择'yourTd'：

 var aTag = $('<a>', {href: 'example.com' });
 aTag.text($('.yourTd').text());// Populate the text with what's already there

 $('.yourTd').text('').append(aTag);// Remove the original text so it doesn't show twice.

Answer 2

这是JQuery的做法： -

$('<a>',{
    text:'row 1, cell 1',
    href:'http://www.google.com'       
}).appendTo('tr:first td:nth-child(1) ');

HTML： -

<table border="1">
 <tr>
 <td></td>
 <td>row 1, cell 2</td>
 </tr>
 <tr>
 <td>row 2, cell 1</td>
 <td>row 2, cell 2</td>
 </tr>
 </table>

<强> JS FIDDLE

Answer 3

您可以为指定的表格单元格指定id（例如“链接器”），然后添加单击事件处理程序

<强>的jQuery ：

$("td#linker").click(function(e)
{
    // Make your content bold
    $(this).css("font-weight","bold");
    // Direct the page like a link
    window.location.href="<WHER YOU WANT IT TO GO>";
    // Prevent the click from going up the chain
    e.stopPropagation();
});

<强> HTML ：

<table border="1">
    <tr>
        <td id="linker">Click Me</td>
        <td>row 1, cell 2</td>
    </tr>
    <tr>
        <td>row 2, cell 1</td>
        <td>row 2, cell 2</td>
    </tr>
</table>

Answer 4

首先在要创建链接的html td元素上添加类，例如：

<table border="1">
  <tr>
    <td class="link">row 1, cell 1</td>
    <td>row 1, cell 2</td>
  </tr>
  <tr>
    <td class="link">row 2, cell 1</td>
    <td>row 2, cell 2</td>
  </tr>
</table>

然后使用jQuery在td元素

中创建链接

$('td.link').each(function() {
    $(this).html('<a href="google.com">' + $(this).html() + '</a>')
});

Answer 5

如果您希望能够覆盖td内的链接，请使用以下代码。如果你要通过ajax添加额外的记录，也可以使用$（'body'）。

<table class="table">
<tbody>
<tr data-url="/yourlink">
<td>test</td>
<td>test2</td>
<td class="custom_url">
<a href="youroverridelink">link</a>
</td>
</tr>
</tbody>
</table>


$(document).ready(function() {
   $('body').on('click','.table > tbody > tr > td', function() {
        window.location = $(this).not('.custom_url').parent().data('url');
   });
});

如何使用JQuery将链接放到表格单元格中

5 个答案: