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

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

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

Answer 5

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

$(function() {

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

});

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

5 个答案: