2

下面是简单/示例表。因为问题是如何为我需要的特定表格单元格添加链接。例如，当我单击表格“第 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>

感谢分享。

4

5 回答 5

5

你需要一个标签：

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

只需将 href 值替换为您要链接到的任何站点即可。

jQuery 更新：

如果您尝试使用 jQuery 执行此操作，则首先需要将某种唯一标识符/选择器添加到所需的 td（例如类或序数位置），然后添加锚标记。我们现在只调用 td select '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.
于 2013-07-09T16:24:04.463 回答
1

如果您希望能够覆盖 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');
   });
});
于 2016-11-25T16:50:33.437 回答
0

这是执行此操作的 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小提琴

于 2013-07-09T16:27:19.913 回答
0

您可以为您指定的表格单元格提供一个 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>
于 2013-07-09T16:29:59.640 回答
0

首先在要创建链接的 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>')
});
于 2013-07-09T16:30:28.783 回答