动态ajax填充表在IE 8中不起作用

时间:2012-10-31 14:51:10

标签: javascript jquery ajax internet-explorer-8

大家好我已经发了IE8,这是代码:

Html代码:

  <table id=\"myTable\" border="1">

javascript函数:

function loadTableContent() {

$.ajax({
    type : 'GET',
    url : '/sohara/viewResults.do',
    contentType : 'application/json; charset=utf-8',
    success : function(response) {
        result = response;

        var html_Table = '';
        html_Table += '<tr><th bgcolor="silver">Type</th>
                    <th bgcolor="silver">Quantity A</th>
                    <th bgcolor="silver">Quantity B</th></tr>';
        for ( var i = 0; i < result.length; i++) {
            html_Table += '<tr>';
            html_Table += '<td>'+result[i].description+'</td>';
            html_Table += '<td>'+result[i].quantityA+'</td>';
            html_Table += '<td>'+result[i].quantityB+'</td>';
            html_Table += '</tr>';          
        }   
        html_Table += '</table>';
        $("#myTable").append(html_Table);
    },
    error : function(response) {
        alert("Error");
    }
});
}

在Firefox,Chrome和Opera中总是很完美,但在IE8中,表格中没有显示任何内容。我该如何管理?

2 个答案:

答案 0 :(得分:2)

我不是100%正在发生的事情,而是一些可能性:

  • 您的<table>元素不完整,因为它没有结束标记。我最初认为这只是因为你是简洁的并且没有在你的例子中包含它,但后来我注意到你在JavaScript中包含了</table>。您需要通常在HTML中终止标记,如下所示:

    <table id=\"myTable\" border="1"></table>

然后在JavaScript中使用它(并删除你在JS中附加的结尾标记)

  • 此外,我认为HTML规范说表格标题行(例如你的TH标签)应该包含在<thead>元素中(例如<table><thead><tr><th>Header</th></tr></thead></table>),而body元素然后将它们包装在<tbody>元素中。大多数浏览器似乎都很好地解析表,即使没有这些,但我指出它可能是你问题的根源。

  • 最后一个潜在的问题是IE一直到IE9都无法在表上设置innerHTML。有关详细信息,请参阅IE9 createElement and setting innerHTML dropping tags on a set operation?can't innerHTML on tbody in IE。我不知道JQuery如何更新表数据。我认为如果他们依赖这种方法,我们会在这里看到更多关于它的问题,但谁知道呢。

答案 1 :(得分:0)

工作解决方案:

根据Matt,我首先以这种方式宣布表格:

<table id=\"myTable\" border="1"></table> // FULL working method

事实上,如果我不关闭它,IE8会自动以这种方式关闭html标记,导致添加新的html代码时出现几个问题:

<table id=\"myTable\" border="1"></> // NOT working method 

然后而不是使用:

$("#myTable).append(html_Table);

我用:

$("#myTable).html(html_Table);

显然我必须从ajax中删除:

html_Table += '</table>';

全力以赴:)