超链接未正确显示在 td 元素中答案

【问题标题】：Hyperlink not properly showing in a td element超链接未正确显示在 td 元素中
【发布时间】：2014-02-19 16:26:53
【问题描述】：

我能够创建td 元素的hyperlink，但是每当我单击td 单元格内的空白区域时，html 代码（动态添加的<a href> 标记）就会显示替换td 的数据。当我单击 td 的文本时它可以正常工作，但如果我单击该 td 单元格的空白区域则无法正常工作。任何帮助将不胜感激。

下面是我的代码sn-p：

$(document).ready(function(){
    $('#s_1_l').find("tr").each(function() {
           $(this).find("td").eq(2).html("<a href='#'>"+$(this).find("td").eq(2).text()+"</a>");                  
             }); 
});

提前致谢。

奇兰吉特

【问题讨论】：

我不太明白你的问题。当您单击td 中的文本时，链接文本将替换为<a href>？你能设置一个jsfiddle.net 来重现问题吗？
我在一个由 Siebel (Open UI) 生成的小程序中执行此操作。我没有任何可使用的 html 页面。只有通过 JS，我才需要为特定列添加此动态 href 标记，以便单击文本（不在 td 单元格内的空白处）将打开一个新窗口。

标签： javascript jquery jqgrid siebel

【解决方案1】：

你为什么要创建超链接？抱歉，如果您想在点击时触发的那些 TD 元素上附加一些功能，那么这并没有多大意义，那么您应该只为这些 TD 元素附加一个侦听器。由于您已经在使用 jQuery，因此请使用以下内容：

$("#s_1_l td:nth-child(3)").click(function(){
// what should be done when the users clicks
});

//make the cursor a pointer for it.
$("#s_1_l td:nth-child(3)").css("cursor","pointer");

这比循环遍历每个集合并添加一个 href 在资源上要轻得多。

查看示例：HERE

【讨论】：

感谢您的帮助。但我想要的只是在 td 超链接中创建文本并单击它会将他带到特定的 url。但是在这里我看到整个 td 被超链接。在我上面提到的代码中，我做对了，除了每当我点击 td 单元格中的空白区域时，动态添加的 html 代码会显示替换 td 的文本。

【解决方案2】：

我不确定，但你可以试试这个？

$(document).ready(function(){
   $('#s_1_l').find("tr").each(function() {
        $(this).find("td").eq(2).html('<a href="javascript:;">'+$(this).find("td").eq(2).text()+'</a>');
   });
});

如果没有，请出示您的 html 代码。

【讨论】：

【解决方案3】：

使用 css 你可以试试这个：

td {
  padding: 0;
}

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

FIDDLE

或者你可以直接在td上绑定一个点击事件：

$('#s_1_l').find("tr").each(function() {
    $(this).find("td").eq(2).addClass('td-link');
    $(this).find("td").eq(2).click(function () {
        // do things
       console.log($(this).html())
    });
});

FIDDLE

【讨论】：