将选择对象动态添加到表中

Add select object dynamically to table

本文关键字：添加 动态 选择 对象      更新时间：2023-09-26

我正在尝试生成两个下拉列表（元素），并将它们作为新行附加到表中。

这两个列表是通过读取一个已经存在的select元素来创建的。

var sfp_opt = document.getElementById('sfp_opt');
var sfps = [];
for (var i = 0; i < sfp_opt.children.length; ++i) {
    var child = sfp_opt.children[i];
    if (child.tagName == 'OPTION') sfps.push(child.value);
}
counter += 1;
var s1 = $("<select></select>");
s1.id = 'SfpSelId' + counter;
s1.name = 'SfpSelName' + counter;
for(var val in sfps) {
    $("<option />", {value: val, text: sfps[val]}).appendTo(s1);
}

类似地，我正在创建另一个名为s2的select元素。我想将这两个列表附加在单独的<td>但相同的行中，即<tr>。所以我尝试了这些方法：

1）$("#sfp_det tbody").append('<tr><td>'+s1+'</td><td>'+s2+'</td></tr>');

如果不正确的话，在UI.s1.val（）上显示为[object object]也没有帮助。

2） 我可以使用.wrap（）函数。这适用于一个列表。

$("#sfp_det tbody").append($(s1).wrap('<tr><td></td></tr>'));

我的问题是，我如何以类似的方式附加两个列表，以便以等效于<table><tr><td>list1(s1)</td><td>list2(s2)</td></tr></table>的格式获得它，其中s1和s2是下拉列表或选择元素？可以用.wrap（）来做吗？如果没有，谁能建议我正确的语法来完成这项工作吗？

您可以使用这样的东西：

    var select1 = $('<select>');
    var select2 = $('<select>');
    wrapWithTd(select1).add(wrapWithTd(select2)).wrapAll('<tr>');        
    $('table tbody').append(select1.parents('tr'));
    function wrapWithTd(el) {
        el.wrap('<td>');
        return el.parent();
    }

请参阅：http://jsfiddle.net/inser/c36VT/

相关文章：