javascript - 超链接未正确显示在 td 元素中

Question

我能够创建一个元素hyperlink，td但是每当我单击单元格内的空白区域时td，html 代码（<a href>动态添加的标记）就会显示替换td.td但如果我单击该单元格的空白区域，则不起作用td。任何帮助将不胜感激。

下面是我的代码片段：

$(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>");                  
             }); 
});

提前致谢。

奇兰吉特

Answer 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在资源上要轻得多。

参见示例：这里

Answer 2

使用 css 你可以试试这个：

td {
  padding: 0;
}

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

小提琴

或者也许你只是直接在你的云上绑定一个点击事件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())
    });
});

小提琴

Answer 3

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

$(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 代码。