jQuery - 动态表格行在 IE/Opera 中不起作用答案

【问题标题】：jQuery - Dynamic table rows don't work in IE/OperajQuery - 动态表格行在 IE/Opera 中不起作用
【发布时间】：2017-06-07 17:27:46
【问题描述】：

示例（适用于 Firefox）： http://progamonth.com/files/tablestestfile.html

我无法将选择元素动态添加到表格中。这在 Firefox 中有效，但在 IE 和 Opera 中失败。这是怎么回事？

DOM 代码：

<table id = "myTable">
<thead>
<tr><th>1</th><th>2</th><th>3</th>
</thead>
<tbody>
</tbody>
</table>
<select id = "select1" class = "hidden">
<option>1</option>
<option>2</option>
<option>3</option>
</select>
<select id = "select2" class = "hidden">
<option>A</option>
<option>B</option>
<option>C</option>
</select>

Javascript:

$(document).ready(function(){
    $('#myTable tbody').append(generate());
});

function generate()
{
  var $row = $('<tr>');

    var selects = [$('#select1'),
                   null,
                   $('#select2')];

    for( var i in selects )
    {
        var $td = $('<td></td>');

        if( selects[i] != null )
        {
            var $select = selects[i].clone().show().removeAttr("id");

            $select.find('option:first').before($('<option>'));
            $select.val("");
            $td.append($select);
        }

        $row.append($td);
    }

    return $row;
}

【问题讨论】：

你想通过这个实现什么目标？

标签： javascript jquery html dynamic html-table

【解决方案1】：

我刚刚尝试了您的代码。看来，在 IE 中，“隐藏”css 类（显示：无）中设置的显示属性没有被覆盖，即使您调用了 show()。删除克隆选择元素的 css 类或将“显示”属性显式设置为“块”/“内联”有效：

$select.removeClass('hidden');

（或）

$select.css({display:'block'});

【讨论】：