Question

我有以下jQuery代码（x为3，我为1，storeid为4）：

function addNewTableRow(x,i,storeid){
    $('#kds_resultsTable tbody').append('<tr></tr>'); //tr:nth-child('+(i)+')'
    for (var a=1; a<=x; a++) {
        if(a==1){
            $('#kds_resultsTable tbody tr:nth-child('+(i)+')').append($.parseHTML("<td class='"+i+"'></td>"));
        }else{
            $('#kds_resultsTable tbody tr:nth-child('+(i)+')').append($.parseHTML("<td class='"+i+" kds_elementstoreid_"+storeid+"></td>"));
        }
    }
}

但是，如果x确实为3（表示else情况应该打印两次），HTML输出就是这个（单个表行作为示例）：

<tr>
    <td class="5 kds_elementsstoreid_4"></td>
</tr>

似乎.append正在覆盖先前在for循环中附加的文本，并且只留下在循环的最后一次迭代中生成的HTML。我原本期望3 <td></td>个元素，而不仅仅是那个元素。

这里使用.append()正确的jQuery函数，还是应该使用其他不会覆盖我之前内容的东西？我不确定在不使用.append()的情况下实现我想要做的事情的另一种方式。

作为参考，我正在使用最新版本的jQuery（截至2013年3月15日）。

Answer 1

要回答您的问题：是的，.append()是正确的呼叫功能。它不应该覆盖以前附加的<td>元素。

我看不出你的代码有什么问题。它看起来像＆＃34; i＆＃34;参数应与新添加的行的编号匹配，以便tr:nth-child(i)引用该行。

我建议重写此功能以避免使用tr:nth-child(i)。

您可以尝试以下方式：

function addNewTableRow(x, i, storeid) {
    var $row = $('<tr></tr>');
    for (var a = 1; a <= x; a++) {
        var $cell = $('<td class="' + i + '"></td>');
        if (a > 1) {
            $cell.addClass('kds_elementstoreid_'+ storeid);
        }
        $row.append($cell);
    }
    $('#kds_resultsTable').find('tbody').append($row);
}

注意：我不认为拨打$.parseHTML()是必要的，但问题并非如此。

Answer 2

在这里，你忘记了else语句中的最后一个单引号。改变这个

else{
            $('#kds_resultsTable tbody tr:nth-child('+(i)+')').append($.parseHTML("<td class='"+i+" kds_elementstoreid_"+storeid+"></td>"));
        }

到这个

else{
            $('#kds_resultsTable tbody tr:nth-child('+(i)+')').append($.parseHTML("<td class='"+i+" kds_elementstoreid_"+storeid+"'></td>"));
        }

http://jsfiddle.net/Eru5M/7/

Answer 3

尝试使用.after（）;

，而不是使用追加

$('#kds_resultsTable tbody').after('<tr></tr>'); //tr:nth-child('+(i)+')'
for (var a=1; a<=x; a++) {
    if(a==1){
        $('#kds_resultsTable tbody tr:nth-child('+(i)+')').append($.parseHTML("<td     class='"+i+"'></td>"));
    }else{
        $('#kds_resultsTable tbody tr:nth-child('+(i)+')').append($.parseHTML("<td class='"+i+" kds_elementstoreid_"+storeid+"></td>"));
    }
}

Answer 4

如果您传递i = 1，它将始终寻找第一个元素？

尝试将其更改为：

$('#kds_resultsTable tbody tr:nth-child('+(a)+')')

另外

        $('#kds_resultsTable tbody tr:nth-child('+(i)+')').append($.parseHTML("<td class='"+i+" kds_elementstoreid_"+storeid+"></td>"));

看起来像是错过了一个关闭的撇号。

Jquery。支持写作

4 个答案: