Question

所以我有一个带结构的.xml文件：

<Results>
 <ElemXDataList>
   <Item From="0" To="10" Elements="14511"> 
    <ElemXData>
     <Item>
      <Line>1</Line>
       <Col>0</Col>
       <Header>ID</Header>
       <Val1>0</Val1>
       <Val2>0</Val2>
       <Percent>0</Percent>
     </Item>
     <Item>
     ...
     </Item>
     ...
   </Item>
  <Item From="10" To="20" Elements="1095">
   <ElemXData>
    <Item>
     <Line>1</Line>
      <Col>3</Col>
      <Header>Mzp</Header>
      <Val1>0.996367</Val1>
      <Val2>0.805883</Val2>
      <Percent>19.117855167824704</Percent>
     </Item>
     <Item>
     ...
     </Item>
     ...
  </Item>
</ElemXDataList>
</Results>

我创建了一个.xsl文件来创建2个表（Item From =“0”To =“10”，Item From =“10”To =“20”）。

我的问题是，有人知道创建一个按钮（或列表框）来显示2个表中的任何一个吗？（每个表的两个按钮或列表框以选择要显示的表）

.xsl文件是：

<xsl:template match="/Results">
<html>
  <body>
       <xsl:for-each select="ElemXDataList/Item/ElemXData">
        <table border="2" bordercolor="#ee0022">

        <tr bgcolor="#9acd32">
        <th style="text-align:centered">Line</th>
        <th style="text-align:centered">Col</th>
        <th style="text-align:centered">Header</th>
        <th style="text-align:centered">Val1</th>
        <th style="text-align:centered">Val2</th>
        <th style="text-align:centered">Percent</th>
        </tr>

        <xsl:for-each select="Item">
        <tr>
            <td align="center"><xsl:value-of select="Line"/></td>
            <td align="center"><xsl:value-of select="Col"/></td>
            <td align="center"><xsl:value-of select="Header"/></td>
            <td align="center"><xsl:value-of select="Val1"/></td>
            <td align="center"><xsl:value-of select="Val2"/></td>

            <xsl:choose>
                <xsl:when test="Percent>0">
                    <td bgcolor="#ff0066" align="center"><xsl:value-of select="Percent"/></td>
                </xsl:when>
                <xsl:otherwise>
                    <td align="center"><xsl:value-of select="Percent"/></td>
                </xsl:otherwise>    
            </xsl:choose>
        </tr>
        </xsl:for-each> 
        </table>
        </xsl:for-each> 
  </body>
  </html>
</xsl:template>
</xsl:stylesheet>

Answer 1

我通过创建.html文件和两个函数来达成解决方案。这是我的档案：

<!DOCTYPE html>
<html>
<style>
table,th,td {
  border : 1px solid red;
  border-collapse: collapse;
}

th,td {
  padding: 15px;
}

table, td, th {
    border: 0.5px solid #63afae;
}

th {
    background-color: #449458;
    color: white;
    font-family: Comic Sans MS;
}
</style>

<body bgcolor="#ead8eb" onload="loadCreateButtons();return false;">

<br/>
<div id="mytable"></div>
<table id="demo"></table>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>

    <script>
    function loadCreateButtons() {
        var xmlhttp = new XMLHttpRequest();
        xmlhttp.onreadystatechange = function() {
        if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
          createButtons(xmlhttp);
                }
            }
        xmlhttp.open("GET", "test.xml", true);
        xmlhttp.send()
    }
    </script>

    <script>
    function createButtons(xml) {
    var i, j, buttonContainer;
    var header = "<tr bgcolor="+"#9acd32"+"><th style="+"text-align:centered"+">Line</th><th style="+"text-align:centered"+">Col</th><th style="+"text-align:centered"+">Header</th><th style="+"text-align:centered"+">Val1</th><th style="+"text-align:centered"+">Val2</th><th style="+"text-align:centered"+">Percent</th></tr>";
    var table = "<tr bgcolor="+"#9acd32"+"><th style="+"text-align:centered"+">Line</th><th style="+"text-align:centered"+">Col</th><th style="+"text-align:centered"+">Header</th><th style="+"text-align:centered"+">Val1</th><th style="+"text-align:centered"+">Val2</th><th style="+"text-align:centered"+">Percent</th></tr>";
    var xmlDoc = xml.responseXML;
    var y = xmlDoc.getElementsByTagName("Items");
    var x = xmlDoc.getElementsByTagName("Item");

    var buttonsToCreate = [];
    for(i = 0; i < y.length; i++)
        {
        buttonsToCreate[i] = "table" + (i);
        }

    for (j = 0; j < buttonsToCreate.length; j++) {
        var btn = document.createElement("BUTTON");
        btn.id = "button" + j;
        var t = document.createTextNode(buttonsToCreate[j]);
        btn.appendChild(t);
        btn.onclick = function (){
            var str = this.id;
            var str2 = str.replace("button", "table");
            $('html, body').animate({
                        scrollTop: $("#" +str2).offset().top - 50.2}, 2000);
            };
        document.getElementById("mytable").appendChild(btn);
        }   

    var tableLengths = [];
    for(j = 0; j < y.length; j++)
      {
        tableLengths[j] = y[j].getAttribute("Elements");
      }

      var index = 0;
      var myCounter = 0;
      for(j = 0; j < y.length; j++)
      {
      myCounter += parseInt(tableLengths[j]);
      if(j > 0 ){
        table +=header;
      }
      for (i = index; i < myCounter; i++) 
          { 
           var color = "#ffffff>"
            if(i % 2 == 0)
            {
                color = "#c8f463>";
            }   
            table += "<tr id="+"table"+j+"><td bgcolor="+ color +
            x[i].getElementsByTagName("Line")[0].childNodes[0].nodeValue +
            "</td ><td bgcolor="+ color +
            x[i].getElementsByTagName("Col")[0].childNodes[0].nodeValue +
            "</td><td bgcolor="+ color +
            x[i].getElementsByTagName("Header")[0].childNodes[0].nodeValue +
            "</td><td bgcolor="+ color +
            x[i].getElementsByTagName("Val1")[0].childNodes[0].nodeValue +
            "</td><td bgcolor="+ color +
            x[i].getElementsByTagName("Val2")[0].childNodes[0].nodeValue +
            "</td>";

            if(x[i].getElementsByTagName("Percent")[0].childNodes[0].nodeValue > 0)
                {
                table +="<td bgcolor="+"#ffc0cb>" + x[i].getElementsByTagName("Percent")[0].childNodes[0].nodeValue + "</td></tr>";
                }
            else
                {
                table += "<td bgcolor="+ color + x[i].getElementsByTagName("Percent")[0].childNodes[0].nodeValue + "</td></tr>";
                }
          }
          index = i;
      }
      document.getElementById("demo").innerHTML = table;    
    };   
    </script>
</body>
</html>

我更改了第一个＆＃34; Item＆＃34;标签到＆＃34;项目＆＃34;当我使用＆＃34; getElementById＆＃34;因为该标记内的另一个标记具有相同的名称。有人可以知道如何使用我想要的标签吗？（类似于给出＆＃34;路径＆＃34; getElementById（＆＃34; Results \ ElemXDataList \ Item＆＃34;））

使用Xml文件和xsl显示表

1 个答案: