Untitled

<!DOCTYPE html>
<html>
<head>
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>

	<title>Formulari amb Ajax made in china</title>
</head>
<body>
<style type="text/css">
  th {
    background-color: #1400d4;
    color:white;
  }
  tr {
    background-color: #867aff91;
  }
  td {
    padding: 2px;
  }

</style>
<strong>Selecciona una consola per a veure m&eacute;s informaci&oacute;.</strong><br>
  <select name="desplegable" onchange="mostrarInfo(this.value)" id="desplegable">

  </select>

  <div id="consoleData">

  </div>
<table id="consoleTable"></table>


<script type="text/javascript">

  function imprimirTable(xml) {
    var i;
    var xmlDoc = xml.responseXML;
    var table="<tr><th>Orden</th><th>Titulo</th><th>Plataforma</th><th>Genero</th><th>Fecha</th><th>Descripcion</th></tr>";
    var x = xmlDoc.getElementsByTagName("juego");
    for (i = 0; i <x.length; i++) {
      table += "<tr><td>" +
       x[i].getElementsByTagName("orden")[0].childNodes[0].nodeValue +
      "</td><td>" +
       x[i].getElementsByTagName("titulo")[0].childNodes[0].nodeValue +
      "</td><td>" +
       x[i].getElementsByTagName("plataforma")[0].childNodes[0].nodeValue +
      "</td><td>" +
       x[i].getElementsByTagName("genero")[0].childNodes[0].nodeValue +
      "</td><td>" +
       x[i].getElementsByTagName("fecha")[0].childNodes[0].nodeValue +
      "</td><td>" +
       x[i].getElementsByTagName("descripcion")[0].childNodes[0].nodeValue +
      "</td><td>"
  }
  document.getElementById("consoleTable").innerHTML = table;
}

  function mostrarInfo(str) {
  var xhttp;
  if (str == "") {
    $("#consoleData").html("");
    return;
  }
  xhttp = new XMLHttpRequest();
  xhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
   imprimirTable(this);
    }
  };
  xhttp.open("GET", str, true);
  xhttp.send();
}


  $(document).ready(function(){       // load jQuery 1.5
  function loadfail(){
  alert("No he pogut llegir el fitxer, qué has fet.");
 }

 function parse(document){
 $(document).find("nombre").each(function(){
    var platformOption = $(this).text();
    $('#desplegable').append(
   '<option value="'+ platformOption + '.xml">' + platformOption + '</option>'
    );

 });
 }

 $.ajax({
  url: 'plataforma.xml',    // name of file with our data - link has been renamed
  dataType: 'xml',    // type of file we will be reading
  success: parse,     // name of function to call when done reading file
  error: loadfail     // name of function to call when failed to read
 });
});


</script>


</body>
</html>