Javascript 需要使用java脚本在html文件中显示XML内容的帮助吗_Javascript_Html_Xml_Dom_Xquery

Javascript 需要使用java脚本在html文件中显示XML内容的帮助吗

javascript html xml dom xquery

Javascript 需要使用java脚本在html文件中显示XML内容的帮助吗,javascript,html,xml,dom,xquery,Javascript,Html,Xml,Dom,Xquery,这是我的xml代码。我想用Javascript在html页面中显示内容 <businesses> <business bfsId="" id="41481"> <advertHeader>Welding Supplies, Equipment and Service Business</advertHeader> <Price>265000</Price> <ca

这是我的xml代码。我想用Javascript在html页面中显示内容

<businesses>
    <business bfsId="" id="41481">
        <advertHeader>Welding Supplies, Equipment and Service Business</advertHeader>
        <Price>265000</Price>
        <catalogueDescription>Extremely profitable (Sales £500k, GP £182k) business</catalogueDescription>
        <keyfeature1>
        Well established 25 year business with excellent trading record
        </keyfeature1>
        <keyfeature2>
        Consistently high levels of turnover and profitability over last 5 years
        </keyfeature2>
    </business>
    <business bfsId="" id="42701">
        <broker bfsRef="1771" ref="003">Birmingham South, Wolverhampton &amp; West Midlands</broker>
        <tenure>freehold</tenure>
        <advertHeader>Prestigious Serviced Office Business</advertHeader>
        <Price>1200000</Price>
        <reasonForSale>This is a genuine retirement sale.</reasonForSale>
        <turnoverperiod>Annual</turnoverperiod>
        <established>28</established>
        <catalogueDescription>This well-located and long-established serviced office</catalogueDescription>
        <underOffer>No</underOffer>
        <image1>https://www.business-partnership.com/uploads/business/businessimg15977.jpg</image1>
        <keyfeature1>other connections</keyfeature1>
        <keyfeature2> Investment Opportunity</keyfeature2>
        <keyfeature3>Over 6,000 sq.ft.</keyfeature3>
        <keyfeature4>Well-maintained </keyfeature4>
        <keyfeature5>In-house services &amp; IT provided</keyfeature5>
    </business>
</businesses>


.   一些
节点比其他节点具有更多的子节点。所以我得到的结果是这样的

其中第一行有5列，第二行有10列以上
我想

仅显示特定的子节点，如
<代码>

和

，以便每行显示相等数量的列

如果

节点的值<10000，我不想打印争夺

如何使用此代码执行此操作

此代码适用于我。这是完整的代码

<!DOCTYPE HTML>
<html lang="en">
<head>

<meta charset="utf-8">
<meta name="viewport" content="width=device-width,height=device-height,initial-scale=1">

<title>XML display</title>

<link rel="stylesheet" href="screen.css" media="screen">

<style media="screen">
body {
    background-color: #f9f9f9;
    font: normal 1em / 1.5em BlinkMacSystemFont, -apple-system, 'Segoe UI', roboto, helvetica, arial, sans-serif;
 }
h1,noscript {
    text-align: center;
 }

#mainTable {
    max-width: 62.5em;
    margin: auto;
    border-collapse: collapse;
    background-color: #fff;
 }

#mainTable th, #mainTable td {
    padding: 0.5em;
    border: 1px solid #999;
}

</style>

</head>
<body>

 <h1> XML Display</h1>

 <noscript>
  <p>JavaScript is required for this project</p>
 </noscript>

<script>
(function( d ) {
   'use strict';

  var xmlhttp = new XMLHttpRequest();
      xmlhttp.open('get', 'https://alpha.business-sale.com/bfs.xml', true );
      xmlhttp.onreadystatechange = function() {
         if (  this.readyState === 4 && this.status === 200) {
               showResult( this );
           }
          };
      xmlhttp.send( null );

function showResult( xmlhttp ) {
   var xmlDoc = xmlhttp.responseXML.documentElement,
           pr = xmlDoc.getElementsByTagName( 'Price' ),
           ah = xmlDoc.getElementsByTagName( 'advertHeader' ),
           cd = xmlDoc.getElementsByTagName( 'catalogueDescription' ),
           minimumValue = 10000,
            c, tl, thd, th, tb, tr, td;

   tl = d.createElement( 'table' );
   tl.setAttribute( 'id', 'mainTable' );
   thd = d.createElement( 'thead' );
   tr = d.createElement( 'tr' );

   th = d.createElement( 'th' );
   th.appendChild( d.createTextNode( 'Advert Header' ));
   tr.appendChild( th );
   th = d.createElement( 'th' );
   th.appendChild( d.createTextNode( 'Price' ));
   tr.appendChild( th );
   th = d.createElement( 'th' );
   th.appendChild( d.createTextNode( 'Catalogue Description' ));
   tr.appendChild( th );
   thd.appendChild( tr );
   tl.appendChild( thd );

   tb = d.createElement( 'tbody' );
   tl.appendChild( tb );
   d.body.appendChild( tl );

   for ( var c = 0; c < pr.length; c ++ ) {
      if ( Number( pr[c].textContent ) > minimumValue ) {
         tr = d.createElement( 'tr' );
         td = d.createElement( 'td' );
         td.appendChild( d.createTextNode( ah[c].textContent ));
         tr.appendChild( td );
         td = d.createElement( 'td' );
         td.appendChild( d.createTextNode( pr[c].textContent ));
         tr.appendChild( td );
         td = d.createElement( 'td' );
         td.appendChild( d.createTextNode( cd[c].textContent ));
         tr.appendChild( td );
         tb.appendChild( tr );
        }
    }

   td = d.getElementsByTagName( 'td' );
      for ( c = 0; c < td.length; c ++ ) {
         td[c].textContent = td[c].textContent.replace( /\amp;/g, '' );
        }
 }

}( document ));
</script>

</body>
</html>


XML显示
身体{
背景色：#f9f9f9；
字体：普通1em/1.5em BlinkMacSystemFont，-苹果系统，'Segoe UI'，roboto，helvetica，arial，无衬线；
}
h1，noscript{
文本对齐：居中；
}
#主表{
最大宽度：62.5em；
保证金：自动；
边界塌陷：塌陷；
背景色：#fff；
}
#主表th，#主表td{
填充：0.5em；
边框：1px实心#999；
}
XML显示
此项目需要JavaScript
（职能（d）{
"严格使用",；
var xmlhttp=new XMLHttpRequest（）；
open（'get'，'https://alpha.business-sale.com/bfs.xml",对),；
xmlhttp.onreadystatechange=函数（）{
if（this.readyState==4&&this.status==200）{
展示结果（本）；
}
};
xmlhttp.send（空）；
函数showResult（xmlhttp）{
var xmlDoc=xmlhttp.responseXML.documentElement，
pr=xmlDoc.getElementsByTagName（'Price'），
ah=xmlDoc.getElementsByTagName（'advertHeader'），
cd=xmlDoc.getElementsByTagName（'CatalogeDescription'），
最小值=10000，
c、 tl、thd、th、tb、tr、td；
tl=d.createElement（'table'）；
tl.setAttribute（'id'，'mainTable'）；
thd=d.createElement（'thead'）；
tr=d.createElement（'tr'）；
th=d.createElement（'th'）；
appendChild（d.createTextNode（'Advert Header'）；
tr.appendChild（th）；
th=d.createElement（'th'）；
appendChild（d.createTextNode（'Price'））；
tr.appendChild（th）；
th=d.createElement（'th'）；
appendChild（d.createTextNode（‘目录描述’）；
tr.appendChild（th）；
附肢儿童（tr）；
tl.儿童（thd）；
tb=d.createElement（'tbody'）；
儿童结核病；
d、 附肢儿童（tl）；
对于（var c=0；c最小值）{
tr=d.createElement（'tr'）；
td=d.createElement（'td'）；
td.appendChild（d.createTextNode（ah[c].textContent））；
tr.appendChild（td）；
td=d.createElement（'td'）；
td.appendChild（d.createTextNode（pr[c].textContent））；
tr.appendChild（td）；
td=d.createElement（'td'）；
td.appendChild（d.createTextNode（cd[c].textContent））；
tr.appendChild（td）；
儿童结核病；
}
}
td=d.getElementsByTagName（'td'）；
对于（c=0；c


window.addEventListener("load", function() {
            getRows();
        });

        function getRows() {
            var xmlhttp = new XMLHttpRequest();
            xmlhttp.open("get", "2l.xml", true);
            xmlhttp.onreadystatechange = function() {
                if (this.readyState == 4 && this.status == 200) {
                    showResult(this);
                }
            };
            xmlhttp.send(null);
        }

        function showResult(xmlhttp) {
            var xmlDoc = xmlhttp.responseXML.documentElement;
            removeWhitespace(xmlDoc);
            var outputResult = document.getElementById("BodyRows");
            var rowData = xmlDoc.getElementsByTagName("business");

            addTableRowsFromXmlDoc(rowData,outputResult);
        }

        function addTableRowsFromXmlDoc(xmlNodes,tableNode) {
            var theTable = tableNode.parentNode;
            var newRow, newCell, i;
            console.log ("Number of nodes: " + xmlNodes.length);
            for (i=0; i<xmlNodes.length; i++) {
                newRow = tableNode.insertRow(i);
                newRow.className = (i%2) ? "OddRow" : "EvenRow";
                for (j=0; j<xmlNodes[i].childNodes.length; j++) {
                    newCell = newRow.insertCell(newRow.cells.length);
                        //x[i].getElementsByTagName("ARTIST")[0].childNodes[0].nodeValue); 
                        // var ah = getElementsByTagName("ARTIST")[0].childNodes[0].nodeValue.getElementsByTagName("advertHeader")[0] 
                        //var advertHeader = xmlNodes[i].childNodes[j].getElementsByTagName();

                    if (xmlNodes[i].childNodes[j].firstChild) {
                        newCell.innerHTML = xmlNodes[i].childNodes[j].firstChild.nodeValue;
                    } else {
                        newCell.innerHTML = "-";
                    }
                    console.log("cell: " + newCell);

                }
                }
                theTable.appendChild(tableNode);
        }

        function removeWhitespace(xml) {
            var loopIndex;
            for (loopIndex = 0; loopIndex < xml.childNodes.length; loopIndex++)
            {
                var currentNode = xml.childNodes[loopIndex];
                if (currentNode.nodeType == 1)
                {
                    removeWhitespace(currentNode);
                }
                if (!(/\S/.test(currentNode.nodeValue)) && (currentNode.nodeType == 3))
                {
                    xml.removeChild(xml.childNodes[loopIndex--]);
                }
            }
        }

<!DOCTYPE HTML>
<html lang="en">
<head>

<meta charset="utf-8">
<meta name="viewport" content="width=device-width,height=device-height,initial-scale=1">

<title>XML display</title>

<link rel="stylesheet" href="screen.css" media="screen">

<style media="screen">
body {
    background-color: #f9f9f9;
    font: normal 1em / 1.5em BlinkMacSystemFont, -apple-system, 'Segoe UI', roboto, helvetica, arial, sans-serif;
 }
h1,noscript {
    text-align: center;
 }

#mainTable {
    max-width: 62.5em;
    margin: auto;
    border-collapse: collapse;
    background-color: #fff;
 }

#mainTable th, #mainTable td {
    padding: 0.5em;
    border: 1px solid #999;
}

</style>

</head>
<body>

 <h1> XML Display</h1>

 <noscript>
  <p>JavaScript is required for this project</p>
 </noscript>

<script>
(function( d ) {
   'use strict';

  var xmlhttp = new XMLHttpRequest();
      xmlhttp.open('get', 'https://alpha.business-sale.com/bfs.xml', true );
      xmlhttp.onreadystatechange = function() {
         if (  this.readyState === 4 && this.status === 200) {
               showResult( this );
           }
          };
      xmlhttp.send( null );

function showResult( xmlhttp ) {
   var xmlDoc = xmlhttp.responseXML.documentElement,
           pr = xmlDoc.getElementsByTagName( 'Price' ),
           ah = xmlDoc.getElementsByTagName( 'advertHeader' ),
           cd = xmlDoc.getElementsByTagName( 'catalogueDescription' ),
           minimumValue = 10000,
            c, tl, thd, th, tb, tr, td;

   tl = d.createElement( 'table' );
   tl.setAttribute( 'id', 'mainTable' );
   thd = d.createElement( 'thead' );
   tr = d.createElement( 'tr' );

   th = d.createElement( 'th' );
   th.appendChild( d.createTextNode( 'Advert Header' ));
   tr.appendChild( th );
   th = d.createElement( 'th' );
   th.appendChild( d.createTextNode( 'Price' ));
   tr.appendChild( th );
   th = d.createElement( 'th' );
   th.appendChild( d.createTextNode( 'Catalogue Description' ));
   tr.appendChild( th );
   thd.appendChild( tr );
   tl.appendChild( thd );

   tb = d.createElement( 'tbody' );
   tl.appendChild( tb );
   d.body.appendChild( tl );

   for ( var c = 0; c < pr.length; c ++ ) {
      if ( Number( pr[c].textContent ) > minimumValue ) {
         tr = d.createElement( 'tr' );
         td = d.createElement( 'td' );
         td.appendChild( d.createTextNode( ah[c].textContent ));
         tr.appendChild( td );
         td = d.createElement( 'td' );
         td.appendChild( d.createTextNode( pr[c].textContent ));
         tr.appendChild( td );
         td = d.createElement( 'td' );
         td.appendChild( d.createTextNode( cd[c].textContent ));
         tr.appendChild( td );
         tb.appendChild( tr );
        }
    }

   td = d.getElementsByTagName( 'td' );
      for ( c = 0; c < td.length; c ++ ) {
         td[c].textContent = td[c].textContent.replace( /\amp;/g, '' );
        }
 }

}( document ));
</script>

</body>
</html>