Question

INTRO

我正在尝试将一个选择框添加到<td> - 单元格。我不知道会有多少行或<td>，并且不知道选择框中会有多少选项，所以我需要动态地执行此操作。

我的代码

我首先构建我的<select>框，如下所示：

var select = $("<select>").addClass('form-control');
// for later expansion, as user can add custom fields
var options = {
    ''                  : 'Ignore',
    'first_name'        : 'First Name',
    'last_name'         : 'Last Name',
    'full_name'         : 'Full Name',
    'email'             : 'Email',
    'cellphone_number'  : 'Cellphone Number'
};
$.each(options,function(i,v) {
    select.append($('<option>').val(i).text(v));
});

然后我这样添加：

$.each(parsedCSV[0],function(i,v) {
    value = [];
    if(i != "") {
        for(k = 0; k < 10; k++) {
            value.push(parsedCSV[k][i]);
        }
        tr = $('<tr>').appendTo(table);
        if(col_header) {
            tr.append($('<tr>').html(i));
        }
        tr.append($('<td>')
            .append(select)
        ).append($('<td>')
            .html(value.join(', '))
        );
    }
});

parsedCSV是Object，如下所示：

{
    'name' : 'value',
    'index' : 'value',
    'foo' : 'bar',
}

此Object可以包含任意数量的键和值。

什么错？

<select>框只出现在最后一行而不是每一行我都喜欢它。如果我在console.log(select)中添加了$.each()，它会显示在Chrome控制台中，所以就在那里。

知道为什么会这样吗？

Answer 1

元素不能同时存在于DOM的多个位置。

当你将它附加到某个地方时，如果已经存在并将其放在新位置，它将从DOM中删除。

您只创建一个选择元素，然后尝试将其放在多个位置。

或者：

调用多次创建或
每次附加时，克隆您创建的第一个

HTML选择仅添加到最后一行

INTRO

我的代码

什么错？

1 个答案: