Question

我有以下HTML代码：

<table id="tutorial" width="600" border="1">
<tr>
    <td data-value="a">a</td>
    <td>apple</td>
</tr>
<tr>
    <td data-value="b">b</td>
    <td>ball</td>
</tr>
<tr>
    <td data-value="c">c</td>
    <td>cat</td>
</tr>

以及以下JavaScript：

$('#tutorial').find('tr').each (function(t) {
  $(this).append('<td>',$('td', this).data('value'),'</td>')
});

jQuery在添加第一个和最后一个参数后添加数据值。所以它是这样的：<td></td>a。所需行为为<td>a</td>

Answer 1

$(this).append('<td>' + $('td', this).data('value') + '</td>')

（基本上只是将逗号更改为加号）

JSBIN

Answer 2

您希望将该值附加到新的td，但您的append会将每个项目添加为您正在调用它的tr的子项。

就像你说的那样：

$(this).append('<td>');                       // creates a new, complete TD
$(this).append($('td', this).data('value'));  // stick some text after the TD
$(this).append('</td>');                      // nothing to close, discarded

你想要这个：

$('<td>').                            // create a TD
  text($('td', this).data('value')).  // set its text content
  appendTo(this);                     // append to the row

Answer 3

以下是编写jQuery以获得所需效果的方法：

$('#tutorial').find('tr').each (function() {
    $(this).append( $('<td/>',{text:$('td',this).data('value')}) )
});

append（）不一致地添加内容

3 个答案: