Question

我有一个带有表单的html页面。在这种形式中，我有1个输入字段可供用户使用，其类型设置为file。表格通常是隐藏的。

当用户按下调用jQuery.dialog()功能的按钮时，会出现该表单。对话框的创建很好，但输入字段永远不会显示。我无法确定它是否完全显示，或者只是放在屏幕外。

同样的情况发生在一个由javascript自动生成的表中。该表由几个输入元素（尽管不同类型）和每行1个选择元素组成。现在正确显示了select元素，所有输入元素都没有。

这是Internet Explorer的问题吗？因为所有其他（主要）浏览器都显示它很好。对于主流浏览器，我的意思是Chrome，FF，Safari＆amp;戏。

编辑＆gt;源

页面中的表单：

<form title="Upload snapshot" class="hidden" enctype="multipart/form-data" id="fileUpload" name="fileUpload">
    <input type="hidden" name="command" value="load" />
    <input type="hidden" name="table" id="formTable" />
    <input type="file" id="uploadedFile" name="uploadedFile" />
</form>

将表单转换为对话框的函数：

function LoadDatabase(){
    var form = document.getElementById('fileUpload');
    var table = document.getElementById('formTable');
    $(table).attr('value', Settings['table']);
    $(form).dialog({
        position    : 'center',
        autoOpen    : true,
        width       : 500,
        modal       : true,
        draggable   : true,
        buttons     : {
        "Ok"    : function(){
            // Code to hande the file upload...
            $(form).dialog('close');
        },
        "Cancel" : function(){
            $(form).dialog('close');
        }
        },
        close       : function(){
        }
    });
}

由于表的复杂性，生成表的代码相当多。基本上，js get的json格式的条目集合。对此集合进行解码，对于每种类型的列，都会创建一个适当的单元格并将其添加到页面的文档中。这一切的核心部分是：

var tbodyNew =  document.createElement('tbody');
$(data.Data).each(function(value) {
    row=this;
    var trRowNew =  document.createElement('tr');
    $(trRowNew).attr('id', row['id']);
    var tdNew = document.createElement('td');
    var rowSelect = document.createElement('input');
    $(rowSelect).attr('type', 'checkbox');
    $(rowSelect).addClass('row-selector');
    $(rowSelect).addClass('hidden');
    $(tdNew).append(rowSelect);
    $(trRowNew).append(tdNew);
    for (var columnId in Columns) {
        tdNew = document.createElement('td');
        if (Columns[columnId].Name == 'id') {
            $(tdNew).addClass('hidden');
        }
        $(tdNew).attr('id', Columns[columnId].Name);
        $(tdNew).append(AddCell(columnId, row));
        $(trRowNew).append(tdNew);
    }
    $(tbodyNew).append(trRowNew);
});
$(tableNew).append(tbodyNew);
$(form).html('');
$(form).append(tableNew);

AddCell()方法确定应使用的输入类型（复选框，文本等）。

编辑2＆gt;额外的图像

进一步解释发生的事情：

图像显示了背景中表格渲染的差异，以及对话框在前景中的显示方式。

enter image description here

编辑3＆gt; DOM检查

我已经在Internet Explorer中检查了DOM结构，并且我已经看到元素放在页面中......它们只是没有渲染。似乎他们没有得到合适的身高和宽度。虽然检查了它们的样式，但它显示这些属性设置为“自动”：

enter image description here

Answer 1

为了解决这个问题，我发现当输入的显示属性设置为表行时，Internet Explorer会阻塞它。删除所述属性将解决问题。但是，根据文档，似乎这实际上是所需的功能。虽然很奇怪，其他浏览器没有遵循文档......

在Internet Explorer中使用Javascript生成的html代码的问题

1 个答案: