jquery - IE 8 で失敗する Jquery の複数の追加呼び出し

Question

だから私は、jqueryを使用してxmlデータを解析し、動的にテーブルに追加するWebアプリケーションに取り組んでいます。ページの同じ部分で切り替えられる 4 つのテーブルがあります。関連する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 の更新はコストがかかり、この状況では各追加の後に発生します。これを 1 つの文字列として構築し、1 つのステップで挿入する方がはるかに優れています。