Question

我不熟悉JavaScript和编程。

所以我正在研究XML文件中的虚拟数据来创建染色体基因浏览器。

我要做的是将XML数据上传到表中，这样可行。现在我想实现一些允许我通过所有列的任何值“实时”过滤/搜索它的东西，但我似乎无法让它工作。有人可以帮忙吗？

这是我的虚拟 cd_catalog.xml ：

 <?xml version="1.0" encoding="UTF-8"?>
 <GENE>
  <GENEIDENTIFIERS>
    <ACCESSION>Empire Burlesque</ACCESSION>
    <GENID>Bob Dylan</GENID>
    <PRODUCT>USA</PRODUCT>
    <LOCATION>Columbia</LOCATION>
    <DETAILS>10.90</DETAILS>
    <YEAR>1985</YEAR>
  </GENEIDENTIFIERS>
  <GENEIDENTIFIERS>
    <ACCESSION>Hide your heart</ACCESSION>
    <GENID>Bonnie Tyler</GENID>
    <PRODUCT>UK</PRODUCT>
    <LOCATION>CBS Records</LOCATION>
    <DETAILS>9.90</DETAILS>
    <YEAR>1988</YEAR>
  </GENEIDENTIFIERS>
  <GENEIDENTIFIERS>
    <ACCESSION>Greatest Hits</ACCESSION>
    <GENID>Dolly Parton</GENID>
    <PRODUCT>USA</PRODUCT>
    <LOCATION>RCA</LOCATION>
    <DETAILS>9.90</DETAILS>
    <YEAR>1982</YEAR>
  </GENEIDENTIFIERS>
</GENE>

这是我的HTML：

<!DOCTYPE html>
<html>
<style>
table,th,td {
  border : 1px solid black;
  border-collapse: collapse;
}
th,td {
  padding: 5px;
}
</style>
<body>

<h2>Chromosome Browser</h2>

<input type="text" id="myInput" onkeyup="myFunction1()" placeholder="Search for genes..." title="Type in a accession no., gene ID, product or location">



<button type="button" onclick="loadXMLDoc()">Display genes</button>
<br><br>
<table id="demo"></table>

<script>
function loadXMLDoc() {
  var xmlhttp = new XMLHttpRequest();
  xmlhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
      myFunction(this);
    }
  };
  xmlhttp.open("GET", "cd_catalog.xml", true);
  xmlhttp.send();
}
function myFunction(xml) {
  var i;
  var xmlDoc = xml.responseXML;
  var table="<tr><th>Accession</th><th>Gene ID</th><th>Protein Product(s)</th></th><th>Loction</th><th>Details</h></tr>";
  var x = xmlDoc.getElementsByTagName("GENEIDENTIFIERS");
  for (i = 0; i <x.length; i++) { 
    table += "<tr><td>" +
    x[i].getElementsByTagName("ACCESSION")[0].childNodes[0].nodeValue +
    "</td><td>" +
    x[i].getElementsByTagName("GENID")[0].childNodes[0].nodeValue +
    "</td><td>" +
    x[i].getElementsByTagName("PRODUCT")[0].childNodes[0].nodeValue +
    "</td><td>" +
    x[i].getElementsByTagName("LOCATION")[0].childNodes[0].nodeValue +
    "</td><td>" +
    x[i].getElementsByTagName("DETAILS")[0].childNodes[0].nodeValue +
    "</td></tr>";
  }
  document.getElementById("demo").innerHTML = table;
}
</script>



</body>
</html>

Answer 1

我认为您可能需要使用DOM解析器解析XML，您可以在这里找到一个做得很好的解释：

Using JavaScript to parse an XML file

如果您想更详细地了解DOM解析的工作原理：

DOMParser - MDN web docs

如何过滤/搜索html表中加载的xml数据？

1 个答案: