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

提前致谢。

Chiranjit

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。

参见示例：HERE

Answer 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代码。

Answer 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

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

3 个答案: