javascriptの表形式の出力

私は表形式の出力を得るためのこのJavaScript htmlコードを持っています。 XMLデータをスクリプトに入力しています。javascriptの表形式の出力

function myFunction() { 
 
    parser=new DOMParser(); 
 
    xmlDoc=parser.parseFromString(
 
    "<?xml version=\"1.0\" encoding=\"UTF-8\"?>" 
 
    +"<book>"+ 
 
    "<title>The Time Machine and Other Stories</title>"+ 
 
    "<author_name>H. G. Wells</author_name>"+ 
 
    "<publish_date>2016</publish_date>"+ 
 
    "<cost currency=\"USD\">10</cost>"+ 
 
    "<publisher_info>"+ 
 
    "<publisher_name>Read Books Ltd</publisher_name>"+ 
 
    "<publisher_address>"+ 
 
    "<street_name>Evesham street</street_name>"+ 
 
    "<city>Worcestershire</city>"+ 
 
    "<zip_code>11WR</zip_code>"+ 
 
    "<country>United Kingdom</country>"+ 
 
    "</publisher_address>"+ 
 
    "</publisher_info>"+ 
 
    "</book>","text/xml"); 
 

 
    var x=xmlDoc.getElementsByTagName("publisher_address"); 
 
    
 
    for (i=0;i<x.length;i++) { 
 
    document.write("<tr>"); 
 
    var y=x[i].childNodes; 
 
    for (j=0;j<y.length;j++) { 
 
     document.write("<td>"+ y[j].childNodes[0].nodeValue+ "</td>"); 
 
    } 
 
    document.write("</tr>"); 
 
    } 
 
}

table, th, td { 
 
    border: 1px solid black; 
 
}

<h1>My First XML Parsing JavaScript</h1> 
 
<p>Click the button to display book info.</p> 
 
<p id="demo"></p> 
 
<button type="button" onclick="myFunction()">Try it</button> 
 
<table border="0"> 
 
</table>

私は取得しています出力は次のようになります。

イヴシャムstreetWorcestershire11WRUnited王国

私は表形式で出力を取得することはできませんよ、なぜ誰も私を助けることができます？

出典

2017-11-05 Pramod

これは、XMLページに許可されていません[ 'document.write']（https://developer.mozilla.org/en-US/docs/Web/API/Document/write）のためです。 – Teemu

どのように結果を表形式で表示できますか？ – Pramod

'createElement'や' appendChild'のような適切なDOM操作メソッドを使ってテーブルを作成します。 – Teemu

document.write()を使用していますが、出力が期待できません。

createElementを使用してテーブルを作成し、行を作成してデータを入力し、DOMおよびあなたの段落にtdを追加します。

<!DOCTYPE html> 
 
<html> 
 

 
<head> 
 
    <style> 
 
    table, 
 
    th, 
 
    td { 
 
     border: 1px solid black; 
 
    } 
 
    </style> 
 
</head> 
 

 
<body> 
 

 
    <h1>My First XML Parsing JavaScript</h1> 
 
    <p>Click the button to display book info.</p> 
 
    <p id="demo"></p> 
 

 
    <button type="button" onclick="myFunction()">Try it</button> 
 
    <table border="0"> 
 
    <script> 
 
     function myFunction() { 
 
     parser = new DOMParser(); 
 
     xmlDoc = parser.parseFromString(
 
      "<?xml version=\"1.0\" encoding=\"UTF-8\"?>" + 
 
      "<book>" + 
 
      "<title>The Time Machine and Other Stories</title>" + 
 
      "<author_name>H. G. Wells</author_name>" + 
 
      "<publish_date>2016</publish_date>" + 
 
      "<cost currency=\"USD\">10</cost>" + 
 
      "<publisher_info>" + 
 
      "<publisher_name>Read Books Ltd</publisher_name>" + 
 
      "<publisher_address>" + 
 
      "<street_name>Evesham street</street_name>" + 
 
      "<city>Worcestershire</city>" + 
 
      "<zip_code>11WR</zip_code>" + 
 
      "<country>United Kingdom</country>" + 
 
      "</publisher_address>" + 
 
      "</publisher_info>" + 
 
      "</book>", "text/xml"); 
 
      
 
     // creating a table 
 
     table = document.createElement('table'); 
 

 
     var x = xmlDoc.getElementsByTagName("publisher_address"); 
 
     for (i = 0; i < x.length; i++) { 
 
      
 
      // create a row 
 
      var tr = table.insertRow(); 
 
    
 
      var y = x[i].childNodes; 
 
      for (j = 0; j < y.length; j++) { 
 

 
      // crate a cell for your data 
 
      var td = tr.insertCell(); 
 
      
 
      // put the data into your td 
 
      td.innerHTML = y[j].childNodes[0].nodeValue; 
 

 
      } 
 
     } 
 
     // append it to body, or to your p#demo 
 
     document.body.appendChild(table); 
 

 
     } 
 
    </script> 
 
    </table> 
 
</body> 
 

 
</html>

出典

2017-11-05 10:13:36 bhansa

これは答えではありません。結果をテーブルに入れる方法はありますか？ – Pramod

'createElement'、' appendChild'を使うか、 'insertRow（）'、 'insertCell（）'のようなテーブル関数を使う必要があります – bhansa

ありがとうございました – Pramod

あなたはあなたのテーブルににフックするIDを持つコンテナ与える必要があります。その後、あなたのJavaScriptでは、あなたがそのコンテナに追加することができ

<table> 
    <tbody id="my-table-contents"></tbody> 
</table>

を。

<script> 
    var myTable = document.getElementById('my-table-contents'); 

    function myFunction() { 
    parser = new DOMParser(); 
    xmlDoc = parser.parseFromString(
     "<?xml version=\"1.0\" encoding=\"UTF-8\"?>" + 
     "<book>" + 
     "<title>The Time Machine and Other Stories</title>" + 
     "<author_name>H. G. Wells</author_name>" + 
     "<publish_date>2016</publish_date>" + 
     "<cost currency=\"USD\">10</cost>" + 
     "<publisher_info>" + 
     "<publisher_name>Read Books Ltd</publisher_name>" + 
     "<publisher_address>" + 
     "<street_name>Evesham street</street_name>" + 
     "<city>Worcestershire</city>" + 
     "<zip_code>11WR</zip_code>" + 
     "<country>United Kingdom</country>" + 
     "</publisher_address>" + 
     "</publisher_info>" + 
     "</book>", "text/xml"); 

    var x = xmlDoc.getElementsByTagName("publisher_address"); 
    for (i = 0; i < x.length; i++) { 
     myTable.innerHtml += "<tr>"; 
     var y = x[i].childNodes; 
     for (j = 0; j < y.length; j++) { 

     myTable.innerHtml += "<td>" + y[j].childNodes[0].nodeValue + "</td>"; 

     } 
     myTable.innerHtml += "</tr>"; 
    } 

    } 
</script>

出典

2017-11-05 10:23:32

これは動作しません – Pramod

答えて

関連する問題