CODEWITHSUNDEEP
javascripthtmlcssweb
Snkini
Snkini

Reputation: 641

how to wrap the XML data in table of a HTML?

I have an HTML template where i need to display XML with tags inside th of a table. I tried the table-layout:fixed;word-wrap:break-word;width:100% for table tag, but it was dividing the table equally and text in th were not coming to new line as shown in below image.

sample.html

<html>
 <body>
  <style>
   .queryTable {
    table-layout:fixed;
    width:100%;
    word-wrap:break-word;
   }
   th, .markHead{
    background-color:#124191;
    color:white;
   }
  </style>
 <h2>Sample Table </h2>
 <table border="1" class="queryTable">
  <thead>
   <tr>
   <th class="six wide">Table Name</th>
   <th class="six wide">Response Time (in sec.)</th></tr>
  </thead>
  <tbody>
   <th class="markHead" style="text-align:left;"><xmp>......Some XML....... 
   </xmp></th>
   <td>33.33</td>
   <th class="markHead" style="text-align:left;"><xmp>......Some XML....... 
   </xmp></th>
   <td>22.33</td>
   <th class="markHead" style="text-align:left;"><xmp>......Some XML....... 
   </xmp></th>
   <td>32.72</td>
   <th class="markHead" style="text-align:left;"><xmp>......Some XML....... 
   </xmp></th>
   <td>34.30</td>
   </tr>
  </tbody>
 </table>
 </body>    
</html>

Upvotes: 0

Views: 1256

Answers (1)

Simon Jensen
Simon Jensen

Reputation: 309

A pretty nice tutorial already provided by w3schools.

https://www.w3schools.com/xml/xml_examples.asp

See https://www.w3schools.com/xml/cd_catalog.xml and corresponding XML-file https://www.w3schools.com/xml/cd_catalog.xml

I have created this Fiddle snippet below. One problem is that the linked XML-file doesn't have any key associated and cannot be read - yet the script, HTML and CSS works like a charm.

With assigning a class for each td (see how in the script below) you are then able to provide full control for each cell. Below i have used a fixed width but you can use percents. If you don't know the outcome of the XML-file i'll say you use percents only.

function loadXMLDoc() {
  var xmlhttp = new XMLHttpRequest();
  xmlhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
      myFunction(this);
    }
  };
  xmlhttp.open("GET", "https://www.w3schools.com/xml/cd_catalog.xml", true);
  xmlhttp.send();
}

function myFunction(xml) {
  var i;
  var xmlDoc = xml.responseXML;
  var table = "<tr><th class=&#34;navn&#34;>Artist</th><th class=&#34;priskr&#34;>Title</th><th class=&#34;pris&#34;>Year</th></tr>";
  var x = xmlDoc.getElementsByTagName("CD");
  for (i = 0; i < x.length; i++) {
    table += "<tr><td class=&#34;navn&#34;>" +
      x[i].getElementsByTagName("ARTIST")[0].childNodes[0].nodeValue +
      "</td><td class=&#34;priskr&#34;>" +
      x[i].getElementsByTagName("TITLE")[0].childNodes[0].nodeValue +
      "</td><td class=&#34;pris&#34;>" +
      x[i].getElementsByTagName("YEAR")[0].childNodes[0].nodeValue +
      "</td></tr>";
  }
  document.getElementById("YourTableID").innerHTML = table;
}
table.betingelser {
  border: 1px solid #2E181A;
  border-collapse: collapse;
  margin: 5px auto;
  table-layout: fixed;
  width: 450px;
}

.betingelser th.navn {
  border: 1px solid #2E181A;
  border-left: none;
  border-right: none;
  width: 230px;
  text-align: center;
}

.betingelser td.navn {
  border: 1px solid #2E181A;
  border-top: none;
  border-left: none;
  border-right: none;
  border-bottom: none;
  width: 230px;
  padding: 0px 5px;
  text-align: left;
}

.betingelser th.pris {
  border: 1px solid #2E181A;
  border-left: none;
  border-right: none;
  width: 120px;
  text-align: left;
}

.betingelser th.priskr {
  border: 1px solid #2E181A;
  border-left: none;
  border-right: none;
  width: 150px;
  text-align: left;
}

.betingelser td.pris {
  border: 1px solid #2E181A;
  border-top: none;
  border-left: none;
  border-right: none;
  border-bottom: none;
  width: 120px;
  padding: 0px 5px;
  text-align: center;
}

.betingelser td.priskr {
  border: 1px solid #2E181A;
  border-top: none;
  border-left: none;
  border-right: none;
  border-bottom: none;
  width: 150px;
  padding: 0px 5px;
  text-align: center;
}

.betingelser tr:nth-child(even) {
  background-color: #c7aa6b;
}
<button type="button" onclick="loadXMLDoc()">Get my CD collection</button>
<br><br>

<table class="betingelser" id="YourTableID"></table>

Upvotes: 1

Related Questions