求助：基于XSLT实现XML单记录分页及垂直堆叠表格展示

问题1：XSLT prsns 模板匹配修正 #

原代码里的prsn[position()]属于冗余写法，position()在这里没有过滤作用，直接选中prsn节点即可遍历所有记录。修正后的模板会生成包含所有记录的容器，方便后续JS控制显示：

<xsl:template match="prsns">
  <div class="records-container">
    <xsl:apply-templates select="prsn"/>
  </div>
</xsl:template>

问题2：表格单元格内容显示修正 #

确保通过<xsl:value-of select="节点名称"/>正确读取XML节点值，同时为每条记录添加统一类名，方便JS分页时控制显示隐藏。示例prsn模板如下：

<xsl:template match="prsn">
  <div class="record-item" style="display:none;">
    <table>
      <tr>
        <td>姓名：</td>
        <td><xsl:value-of select="name"/></td>
      </tr>
      <tr>
        <td>年龄：</td>
        <td><xsl:value-of select="age"/></td>
      </tr>
      <tr>
        <td>邮箱：</td>
        <td><xsl:value-of select="email"/></td>
      </tr>
    </table>
  </div>
</xsl:template>

完整可运行代码示例 #

XML 数据示例 #

<?xml version="1.0" encoding="UTF-8"?>
<prsns>
  <prsn>
    <name>张三</name>
    <age>28</age>
    <email>zhangsan@example.com</email>
  </prsn>
  <prsn>
    <name>李四</name>
    <age>32</age>
    <email>lisi@example.com</email>
  </prsn>
  <prsn>
    <name>王五</name>
    <age>25</age>
    <email>wangwu@example.com</email>
  </prsn>
</prsns>

修正后的XSLT样式表 #

<?xml version="1.0" encoding="UTF-8"?>
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
  <xsl:output method="html" encoding="UTF-8"/>

  <xsl:template match="/">
    <html>
      <head>
        <style>
          .record-item table { border-collapse: collapse; margin: 20px 0; }
          .record-item td { border: 1px solid #ddd; padding: 8px; }
          .pagination { margin-top: 20px; }
          .pagination a { margin: 0 5px; padding: 4px 8px; border: 1px solid #ddd; text-decoration: none; }
          .pagination a:hover { background: #f5f5f5; }
        </style>
      </head>
      <body>
        <xsl:apply-templates select="prsns"/>
        <div class="pagination" id="pagination">
          <a href="javascript:void(0)" onclick="goToPage(1)">first</a>
          <a href="javascript:void(0)" onclick="goToPage(currentPage - 1)">prev</a>
          <span id="pageInfo"></span>
          <a href="javascript:void(0)" onclick="goToPage(currentPage + 1)">next</a>
          <a href="javascript:void(0)" onclick="goToPage(totalPages)">last</a>
        </div>
        <script type="text/javascript">
          var currentPage = 1;
          var totalPages = 0;
          var records = [];

          window.onload = function() {
            records = document.querySelectorAll('.record-item');
            totalPages = records.length;
            showPage(currentPage);
            updatePageInfo();
          };

          function showPage(pageNum) {
            // 处理边界页码
            if (pageNum < 1) pageNum = 1;
            if (pageNum > totalPages) pageNum = totalPages;

            // 隐藏所有记录
            records.forEach(record => record.style.display = 'none');
            // 显示当前页记录
            records[pageNum - 1].style.display = 'block';
            currentPage = pageNum;
            updatePageInfo();
          }

          function updatePageInfo() {
            document.getElementById('pageInfo').textContent = `${currentPage} / ${totalPages}`;
          }
        </script>
      </body>
    </html>
  </xsl:template>

  <xsl:template match="prsns">
    <div class="records-container">
      <xsl:apply-templates select="prsn"/>
    </div>
  </xsl:template>

  <xsl:template match="prsn">
    <div class="record-item" style="display:none;">
      <table>
        <tr>
          <td>姓名：</td>
          <td><xsl:value-of select="name"/></td>
        </tr>
        <tr>
          <td>年龄：</td>
          <td><xsl:value-of select="age"/></td>
        </tr>
        <tr>
          <td>邮箱：</td>
          <td><xsl:value-of select="email"/></td>
        </tr>
      </table>
    </div>
  </xsl:template>
</xsl:stylesheet>

核心修正点说明 #

1. 移除prsn[position()]的冗余写法，确保XSLT正确遍历所有记录节点，生成完整的DOM结构。
2. 使用<xsl:value-of select="节点名"/>精准读取XML节点文本值，解决内容显示错误问题。
3. JS分页函数添加边界处理，避免页码越界，同时通过类选择器控制单条记录的显示隐藏，配合底部导航实现完整分页逻辑。

内容的提问来源于stack exchange，提问作者mirexS