Question

我有下表，并希望用链接替换每个第1列的字符串文本。因此，“Whatever”和“Whatever2”内容将被替换为相应的链接.html内容。

如何使用jquery执行此操作？

<table>
    <tr>
       <th>Name</th>
       <th>Start</th>
       <th>End</th>
    </tr>
    <tr>
       <td>Whatever</td>
       <td>3/14/2012</td>
       <td>3/31/2012</td>
    </tr>
    <tr>
       <td>Whatever2</td>
       <td>3/15/2012</td>
       <td>3/30/2012</td>
    </tr>
</table>

Answer 1

加载文档后，您可以使用以下内容：

$('td:first-child').each(function(){
  var $td = $(this);
  $td.html('<a href="#">' + $td.text() + '</a>');
});

Fiddle here

Answer 2

$('table tr td:first-child').each(function(){
    var that = $(this);

    that.html('<a href="somelink.html">' + that.text() + '</a>');

});

Answer 3

http://jsfiddle.net/eudsv/

$('td:first-child, th:first-child').each(function(){
   this.innerHTML += 'Added dynamically'    
});

Answer 4

$("table tr td:first-child").html("<a href='http://google.com'>Click here for Google!</a>");

http://jsfiddle.net/WxzfQ/

Answer 5

您可以通过传递callback to the html method：

来有效地执行此操作

$('table tbody tr td:first-child').html(function(i,old) {
    return '<a href="whatever.html">'+old+'</a>';
});

http://jsfiddle.net/wdZbW/

Answer 6

$(function(){
    $("table tr").each(function(){    
        var existingContent=$(this).find('td:first').text();        
        var newLink="<a href='#'>"+existingContent+"</a>";
        $(this).find('td:first').html(newLink);

   });    

})

以下是工作示例：http://jsfiddle.net/uH4vW/3/

Answer 7

解决此问题的最佳方法是向要更改的表中添加一个id，然后在该表中使用第一个<td>元素的选择器

HTML

<table id="container">
  ...
</table>

的JavaScript

$('#container td:first').text('found it');

小提琴：http://jsfiddle.net/cGYj3/

如何替换表的第一列？

7 个答案: