Question

所以我正在开发一个使用jquery来解析xml数据并将其动态添加到表中的Web应用程序。有四个表在页面的同一部分切换。这是相关的html：

<div id = "toggleSection">
<div id = "autoPrevData"></div>
<div id = "firePrevData"></div>
<div id = "auto1Data"></div>
<div id = "auto2Data"></div>
<div id = "auto3Data"></div>
</div>

这是使用AJax的Jquery函数：

    $("#autoEarly").click(function() {
        if (!$("#firePrevData").is(":hidden")) {
            $("#firePrevData").toggle('slow');
        }
        if (!$("#auto1Data").is(":hidden")) {
            $("#auto1Data").toggle('slow');
        }
        if (!$("#auto2Data").is(":hidden")) {
            $("#auto2Data").toggle('slow');
        }
        if (!$("#auto3Data").is(":hidden")) {
            $("#auto3Data").toggle('slow');
        }
        if (loadedModels[0]) {
            loadedModels[0] = false;
            $.ajax
        ({
            type: "GET",
            url: "dashboard_auto.xml",
            dataType: "xml",
            success: parseXml_AutoEarly
        });
        }
        else {
            $("#autoPrevData").toggle('slow');
        }
        return false;

    });

这是实际解析xml的函数：

    function parseXmlEarlyPrevention(xml, xmlRoot, data) {
    //First Header
    $(data).append("<table><tr><th colspan='5'>Model Information</th><th colspan='4'>Score Metrics</th><th colspan='5' >Variable Metrics</th><th colspan='5' style='600;'>Pseudo-Standardized Coefficient Metrics</th></tr>");
    //Second headers
    $(data).append("<tr><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td class='thickBorder'>&nbsp;</td><td colspan='2' style='font-size:1em; color:#888888; border-right:1px solid black'>PSI:</td><td colspan='2' style='font-size:1em; color:#888888; border-right:2px solid black;'>Divergence:</td><td colspan='2' style='font-size:1em; color:#888888; border-right:1px solid black;'>Divergence:</td><td colspan='3' style='font-size:1em; color:#888888; border-right:2px solid black;'>Largest Divergence:</td><td colspan='2' style='font-size:1em; color:#888888; border-right:1px solid black;'>Sum of Changes:</td><td colspan='3' style='font-size:1em; color:#888888;'>Largest Change in Relative Importance:</td></tr>");
    //Third Headers
    $(data).append("<tr><td>Model</td><td>Avg Rank</td><td>Benchmark</td><td>Current</td><td class='thickBorder'># in Curr Period</td><td>Rank</td><td class='thinBorder'>Value</td><td>Rank</td><td class='thickBorder'>Value</td><td>Rank</td><td class='thinBorder'>Average</td><td>1st</td><td>2nd</td><td class='thickBorder'>3rd</td><td>Rank</td><td style='border-right:1px solid black;'>Value</td><td>1st</td><td>2nd</td><td>3rd</td></tr>");

        var x = 1;
        $(xml).find(xmlRoot).each(function() {
            if (x % 2 == 1) {
                $(data).append("<tr>");
                $(data).append("<td class='dataCellBlue'><a href = 'modelInfo.php?model=" + $(this).find("model").text() + "$type=earlyPrev'>" + $(this).find("model").text() + "</a></td>");
                $(data).append("<td class='dataCellBlue'>" + $(this).find("avg_rank").text() + "</td>");
                $(data).append("<td class='dataCellBlue'>" + $(this).find("benchmark").text() + "</td>");
                $(data).append("<td class='dataCellBlue'>" + $(this).find("current").text() + "</td>");
                $(data).append("<td class='dataCellBlue thickBorder'>" + $(this).find("n_current").text() + "</td>");
                $(data).append("<td class='dataCellBlue " + $(this).find("psi_color").text() + "'>" + $(this).find("psi_rank").text() + "</td>");
                $(data).append("<td class='dataCellBlue thinBorder'>" + $(this).find("psi").text() + "</td>");
                $(data).append("<td class='dataCellBlue'>" + $(this).find("divergence_rank").text() + "</td>");
                $(data).append("<td class='dataCellBlue thickBorder'>" + $(this).find("divergence").text() + "</td>");
                $(data).append("<td class='dataCellBlue" + $(this).find("var_color").text() + "'>" + $(this).find("var_div_rank").text() + "</td>");
                $(data).append("<td class='dataCellBlue thinBorder'>" + $(this).find("avg_var_div").text() + "</td>");
                $(data).append("<td class='dataCellBlue" + $(this).find("worst_div_col1").text() + "'>" + $(this).find("worst_div1").text() + "</td>");
                $(data).append("<td class='dataCellBlue" + $(this).find("worst_div_col2").text() + "'>" + $(this).find("worst_div2").text() + "</td>");
                $(data).append("<td class='dataCellBlue thickBorder" + $(this).find("worst_div_col3").text() + "'>" + $(this).find("worst_div3").text() + "</td>");
                $(data).append("<td class='dataCellBlue" + $(this).find("psc_color").text() + "'>" + $(this).find("psc_rank").text() + "</td>");
                $(data).append("<td class='dataCellBlue thinBorder'>" + $(this).find("sum_psc").text() + "</td>");
                $(data).append("<td class='dataCellBlue" + $(this).find("worst_psc_col1").text() + "'>" + $(this).find("worst_psc_var1").text() + "</td>");
                $(data).append("<td class='dataCellBlue" + $(this).find("worst_psc_col2").text() + "'>" + $(this).find("worst_psc_var2").text() + "</td>");
                $(data).append("<td class='dataCellBlue" + $(this).find("worst_psc_col3").text() + "'>" + $(this).find("worst_psc_var3").text() + "</td>");
                $(data).append("</tr>");
            }
            else {
                $(data).append("<tr>");
                $(data).append("<td><a href = 'modelInfo.php?model=" + $(this).find("model").text() + "$type=earlyPrev'>" + $(this).find("model").text() + "</a></td>");
                $(data).append("<td>" + $(this).find("avg_rank").text() + "</td>");
                $(data).append("<td>" + $(this).find("benchmark").text() + "</td>");
                $(data).append("<td>" + $(this).find("current").text() + "</td>");
                $(data).append("<td class='thickBorder'>" + $(this).find("n_current").text() + "</td>");
                $(data).append("<td class='" + $(this).find("psi_color").text() + "'>" + $(this).find("psi_rank").text() + "</td>");
                $(data).append("<td class='thinBorder'>" + $(this).find("psi").text() + "</td>");
                $(data).append("<td>" + $(this).find("divergence_rank").text() + "</td>");
                $(data).append("<td class='thickBorder'>" + $(this).find("divergence").text() + "</td>");
                $(data).append("<td class='" + $(this).find("var_color").text() + "'>" + $(this).find("var_div_rank").text() + "</td>");
                $(data).append("<td class='thinBorder'>" + $(this).find("avg_var_div").text() + "</td>");
                $(data).append("<td class='" + $(this).find("worst_div_col1").text() + "'>" + $(this).find("worst_div1").text() + "</td>");
                $(data).append("<td class='" + $(this).find("worst_div_col2").text() + "'>" + $(this).find("worst_div2").text() + "</td>");
                $(data).append("<td class='thickBorder" + $(this).find("worst_div_col3").text() + "'>" + $(this).find("worst_div3").text() + "</td>");
                $(data).append("<td class='" + $(this).find("psc_color").text() + "'>" + $(this).find("psc_rank").text() + "</td>");
                $(data).append("<td class='thinBorder'>" + $(this).find("sum_psc").text() + "</td>");
                $(data).append("<td class='" + $(this).find("worst_psc_col1").text() + "'>" + $(this).find("worst_psc_var1").text() + "</td>");
                $(data).append("<td class='" + $(this).find("worst_psc_col2").text() + "'>" + $(this).find("worst_psc_var2").text() + "</td>");
                $(data).append("<td class='" + $(this).find("worst_psc_col3").text() + "'>" + $(this).find("worst_psc_var3").text() + "</td>");
                $(data).append("</tr>");
            }
            x++;

        });
        $(data).append("</table>");
        $(data).toggle("slow");
    }

问题是只显示第一个$（data）.append（）调用中的html，之后没有显示任何内容。它在safari和firefox中运行良好，但它是为了工作，我需要它在IE上工作。我一直在试图找到一个很好的解释几个小时上网，但到目前为止我没有运气，坦率地说它让我有点疯狂。谢谢你的帮助

Answer 1

DOM更新很昂贵，在这种情况下，每次追加都会发生一次。你最好将它构建为一个字符串并将其插入一步。

在IE 8中，Jquery中的多个追加调用失败

1 个答案: