超鏈接無法在td元素中正確顯示

我可以創建td元素的hyperlink，但每當單擊td單元格內的空白區域時，html代碼（即動態添加的<a href>標記）都會顯示替換td的數據。當我單擊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

來源

2014-02-18 Chiranjit

我不太瞭解您的問題。當你點擊'td'中的文字時，鏈接文字被替換爲''？你可以設置一個http://jsfiddle.net來重新創建問題嗎？ – Niklas

我在由Siebel（Open UI）生成的小程序中執行此操作。我沒有任何html頁面可以使用。只有通過JS，我需要爲特定列添加這個動態href標籤，以便單擊文本（不在td單元格內的空白區域）將打開一個新窗口。 – Chiranjit

我不確定，但是您可以試試這個嗎？

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

來源

2014-02-18 14:18:50 Netzach

使用CSS，你可以試試這個：

td { 
    padding: 0; 
} 

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

FIDDLE

或者你的雲只是你td直接綁定click事件：

$('#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

來源

2014-02-18 14:26:47 MamaWalter

爲什麼你想創建超鏈接嗎？對不起，但它沒有太多的意義，如果你想要附加一些功能的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

來源

2014-02-18 14:35:47

+1喜歡你的選擇 – MamaWalter

感謝您的幫助。但我想要的是讓td超鏈接內的文本，並點擊它，將他帶到一個特定的url.But在這裏我看到整個td超鏈接。在我上面提到的代碼中，我得到了正確的結果，除非每次單擊td單元格中的空白區域時，動態添加的html代碼都會顯示替換td的文本。 – Chiranjit

超鏈接無法在td元素中正確顯示

回答

相關問題