jQuery的：生成表格單元格的內容鏈接

我有一個很好的表jQuery的：生成表格單元格的內容鏈接

<table id="#table1"> 
    <tr> 
    <td class="column1">foo1</td> 
    <td class="column2">#bar1</td> 
    </tr> 
    <tr> 
    <td class="column1">foo2</td> 
    <td class="column2">#bar2</td> 
    </tr> 
</table>

我想選擇第二列和替換鏈接的內容，在TD對HREF的使用值。所以最終結果應該是：

<table id="#table1"> 
    <tr> 
    <td class="column1">foo1</td> 
    <td class="column2"><a href="#bar1">link</a></td> 
    </tr> 
    <tr> 
    <td class="column1">foo2</td> 
    <td class="column2"><a href="#bar2">link</a></td> 
    </tr> 
</table>

所以我選擇td並用一個很好的href來包裝它。

$("td.column2").wrapInner(function() { 
    return "<a href='" + this.nodeValue + "'></a>"; 
});

然而，這產生這樣的：

<table id="#table1"> 
    <tr> 
    <td class="column1">foo1</td> 
    <td class="column2"><a href="null">#bar1</a></td> 
    </tr> 
    <tr> 
    <td class="column1">foo2</td> 
    <td class="column2"><a href="null">#bar2</a></td> 
    </tr> 
</table>

我在做什麼錯？我可能忽略了一些荒謬簡單的事情，但這是漫長的一天。謝謝你的幫助！

來源

2013-09-24 user2811397

不要在IDS使用''＃。您正在將CSS語法混合到您的html中。 CSS中的'＃'相當於html中的'id ='。當id包含'＃'字符（例如，'id =「＃table1」'）時，要通過CSS引用一個id元素，你需要轉義hash：'＃\＃table1 {}'see [this article ]（http://mathiasbynens.be/notes/css-escapes）瞭解更多信息。 – gilly3

DEMO

$("td.column2").html(function() { 
    return "<a href='" + this.innerHTML + "'>Link</a>"; 
});

或

DEMO

如果你想鏈接的文字是一樣的以前的文本

$("td.column2").html(function() { 
    return "<a href='" + this.innerHTML + "'>"+this.innerHTML+" </a>"; 
});

參考

innerHTML

.html()

來源

2013-09-24 14:34:14

這就是現貨。奇蹟般有效。非常感謝！ – user2811397

@ user2811397歡迎幫助:) –

我結束了使用'$（「td.column2」）。html（function（）{ return「Link」; }）;'按照其他人的建議。感謝大家的快速幫助！ – user2811397

使用jQuery，以及讓你TD的價值......（它只是更連貫到時，你可以使用jQuery），這是它的文字：

第一塊答案：與$(this).text()更換this.nodeValue。

第二條回答：我認爲你正在使用wrapInner()錯誤。請參閱http://api.jquery.com/wrapInner/您想要做的是替換您的td的內容。所以，你應該實際使用$('td.column2').html(function() { // etc }) ;

來源

2013-09-24 14:34:03 Lyth

我建議：

$('td.column2').html(function(i,h){ 
    var text = $(this).text(); 
    return '<a href="' + text + '">' + text + '</a>'; 
});

JS Fiddle demo。

來源

2013-09-24 14:35:41

使用

$("td.column2").html(function() { 
    var self = $(this); 
    return $('<a>',{ 
     href: self.text(), 
     text: 'link' 
    }); 
});

演示在http://jsfiddle.net/V4dFj/

來源

2013-09-24 14:36:34

使用{params} +1（我不知道）。這意味着更好的可讀性。 – Lyth

@奧斯汀我看不到要保留內容的地方。在他的例子中，它被完全取代。 – Lyth

@奧斯汀，不，他不。他希望'＃bar1'和'＃bar2'成爲'link'。但他使用了錯誤的方法，因此除了沒有創建正確的鏈接外，他還將現有的文本保留爲鏈接文本。 –

http://jsfiddle.net/kasperfish/p68pH/

$(function() { 

    $("td.column2").wrapInner(function() { 
    return "<a href='" + $(this).html() + "'></a>"; 
    }); 

});

來源

2013-09-24 14:37:35

這個href值和鏈接名稱。所以它顯示Link bar1# – user2811397

你的問題是在鏈接中顯示錶格單元格內容。不刪除特殊字符。 –

jQuery的：生成表格單元格的內容鏈接

回答

相關問題