0

私のコードを読んでいただければ幸いです。ローカルホストに XML ファイルがあり、H1 とページ上のボタン。

H1 テキストとボタンが onClick で消えるので、結果と同じページに残したいと思います。 

  <h1>Show the Album list</h1>  
   <script>  
   xmlhttp=new XMLHttpRequest();  

   xmlhttp.open("GET","cd_catalog.xml",false);  
   xmlhttp.send();  
   xmlDoc=xmlhttp.responseXML;  
   function CdCatalog()  
    {
       document.write("<table border='1'><th>TITLE</th><th>YEAR</th>");
       var x=xmlDoc.getElementsByTagName("CD");  
       for (i=0;i<x.length;i++)
    {
   document.write("<tr><td>");
   document.write(x[i].getElementsByTagName("TITLE")[0].childNodes[0].nodeValue);
   document.write("</td><td>");
   document.write(x[i].getElementsByTagName("YEAR")[0].childNodes[0].nodeValue);
   document.write("</td></tr>");
    }
       document.write("</table>");
    }
   </script>

4

2 に答える 2

3

問題はdocument.write、ドキュメントが閉じられた後のボタンのクリックイベントに使用していることです...つまり、すべてが上書きされます。あなたのページはシンプルで<h1>ボタンとボタンしかないので、それらのものだけが隠されているように見えますが、ページ上のすべてのものになります (もっとあれば)。

解決策は、コンテンツを動的に使用.appendChildおよび/または追加することです。.innerHTMLすぐに解決策を提供します:)

更新：

テーブルを使用しているので、ネイティブ メソッド.insertRowを使用する.insertCellこともできます。これにより、テーブルの作成がはるかに簡単になります。全体的に使用できるものの例を次に示します。

function CdCatalog(xmlDoc) {
    var table = document.createElement("table");
    var thead = table.createTHead();    // Where "header" rows go
    // `insertRow` creates a <tr> element and appends it to `thead` automatically, returning the element
    var tr = thead.insertRow(-1);
    var td = document.createElement("th");  // No special method for creating "th" elements
    td.innerHTML = "TITLE";  // Set its inner content
    tr.appendChild(th);  // Add it to the row (which is in the header)
    td = document.createElement("td");
    td.innerHTML = "YEAR";
    tr.appendChild(td);

    var x = xmlDoc.getElementsByTagName("CD");
    // "tbody" is where a table's content goes, whether you do this explicitly or not
    var tbody = table.tBodies[0];
    for (var i = 0; i < x.length; i++) {
        tr = tbody.insertRow(-1);
        // `insertCell` creates a <td> element and appends it to `tr` automatically, returning the element
        td = tr.insertCell(-1);
        td.innerHTML = x[i].getElementsByTagName("TITLE")[0].childNodes[0].nodeValue;
        td = tr.insertCell(-1);
        td.innerHTML = x[i].getElementsByTagName("YEAR")[0].childNodes[0].nodeValue;
    }
    // Actually add the table to the DOM (the <body> element in this case)...you can specify where else to put it
    document.body.appendChild(table);
}

// Make sure DOM is ready for manipulation
window.onload = function () {
    var btn = document.getElementById("button_id");  // Whatever your button is
    // Bind the "click" event for the button
    btn.onclick = function () {
        // Make your AJAX request
        var xmlhttp = new XMLHttpRequest();
        xmlhttp.open("GET", "cd_catalog.xml", false);
        xmlhttp.send();
        xmlDoc = xmlhttp.responseXML;
        // Pass the result to the function, instead of making everything global and sharing
        CdCatalog(xmlDoc);
    };
};

そして、私が間違っていない限り、...<td>の中に入れ子にすることはできません<table>...あなたはそれらを<tr>...に入れ子にする必要があります。<table>

于 2012-11-28T01:03:08.737 に答える
0

使用しないでくださいdocument.write。ドキュメントが閉じられているため、タグ内にあるものはすべて削除されます。代わりにこれを行います：

document.body.innerHTML += "<td>blah</td>"

-or-

var td = document.createElement("td");
td.innerHTML = "blah"
document.querySelector("table").appendChild(td);

デモ: http://jsfiddle.net/DerekL/AHZ4C/

于 2012-11-28T01:04:54.513 に答える