jquery - jQuery：从表格单元格内容生成链接

Question

我有一张漂亮的桌子

<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>

我究竟做错了什么？我可能忽略了一些简单得可笑的事情，但这是漫长的一天。谢谢你的帮助！

Answer 1

采用

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

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

Answer 2

演示

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

或者

演示

如果您希望链接文本与以前的文本相同

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

参考

内部HTML

.html()

Answer 3

也可以使用 jQuery 来获取 td 的值...（如果可以的话，使用 jQuery 会更加连贯），这是它的文本：

第一条答案：替换this.nodeValue为$(this).text().

第二条回答：我觉得你用wrapInner()错了。请参阅http://api.jquery.com/wrapInner/您想要做的是替换 td 的内部内容。所以你应该实际使用$('td.column2').html(function() { // etc }) ;

Answer 4

我建议：

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

JS 小提琴演示。

Answer 5

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

$(function() {

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

});