Warning: file_get_contents(/data/phpspider/zhask/data//catemap/9/javascript/441.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181

Warning: file_get_contents(/data/phpspider/zhask/data//catemap/3/html/80.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
Javascript 如何获取<；的图像路径；img src=“是吗？”&引用&燃气轮机；XML文件中的标记_Javascript_Html_Xslt - Fatal编程技术网
Fatal编程技术网
  • javascript/
  • Javascript 如何获取<；的图像路径；img src=“是吗？”&引用&燃气轮机；XML文件中的标记

Javascript 如何获取<；的图像路径；img src=“是吗？”&引用&燃气轮机；XML文件中的标记

javascript html xslt

Javascript 如何获取<；的图像路径；img src=“是吗？”&引用&燃气轮机；XML文件中的标记,javascript,html,xslt,Javascript,Html,Xslt,我想使用xml文件 <pics> <pic no="1">c:\pic1.jpg</pic> <pic no="2">c:\pic2.jpg</pic> <pic no="3">c:\pic3.jpg</pic> <pic no="4">c:\pic4.jpg</pic> <pic no="5">c:\pic5.jpg</pic> .... </

我想使用xml文件

<pics> 
 <pic no="1">c:\pic1.jpg</pic>
 <pic no="2">c:\pic2.jpg</pic>
 <pic no="3">c:\pic3.jpg</pic>
 <pic no="4">c:\pic4.jpg</pic>
 <pic no="5">c:\pic5.jpg</pic>
 ....
</pics>


c:\pic1.jpg
c:\pic2.jpg
c:\pic3.jpg
c:\pic4.jpg
c:\pic5.jpg
....
在html表格中：

<table cellspacing="2" cellpadding="2" border="0">             
    <tr>
    <td><img src="" width="150" height="120" /></td>
    <td><img src="" width="150" height="120" /></td>
    <td><img src="" width="150" height="120" /></td>

   </tr>
   <tr>  
    <td><img src="from xml" width="150" height="120" /></td>
    <td><img src="from xml" width="150" height="120" /></td>
    <td><img src="from xml" width="150" height="120" /></td>
   </tr>
   <tr>
    <td><img src="from xml" width="150" height="120" /></td>
    <td><img src="from xml" width="150" height="120" /></td>
    <td><img src="from xml" width="150" height="120" /></td>
   </tr>                    
</table>
最好的方法是什么？

使用XSL。例子。顺便问一下，为什么您在那里有
no
属性？

  • （和无耻的插头）
XML:


1.
2.
3.
4.
5.
6.
XSLT:
请在此处亲自尝试（将我的代码复制并粘贴到相应的框中）：

    • 建议的输出中有一个bug，因为
      元素在其所在的每个HTML版本中都必须具有
      alt
      属性

      不管怎样，下面的代码可以做到这一点，但是没有那些可以通过CSS实现的属性（只是为了减小大小）。如果需要，将它们重新添加到中并不重要：

      这里是一个典型的解决方案，它遵循XSLT（no
      ）的精神，尽可能简短，并根据表中所需的列数进行参数化

      <xsl:template match="pics">
    <table>
    <xsl:for-each select="pic[position() mod 3 = 1]">
            <tr>
                <td>
                    <xsl:if test="2 &gt; count(following-sibling::pic)">
                        <xsl:attribute name="colspan">
                            <xsl:value-of select="3 - count(following-sibling::pic)"/>
                    </xsl:attribute>
                    </xsl:if>
                    <img src="{.}" alt="" />
                </td>
                <xsl:for-each select="following-sibling::pic[3 &gt; position()]">
                    <td><img src="{.}" alt=""/></td>
                </xsl:for-each>
            </tr>
        </xsl:for-each>
    </table>
</xsl:template>
      当此转换应用于以下XML文档时（基于提供的XML文档，但包含更多彩色有趣的图片）：

      
http://col.stb.s-msn.com/i/D7/6A19748C9AA58B938F42099543D2E.jpg
http://col.stb.s-msn.com/i/1F/35A8478AC24EEF95933B5F0E4E394.jpg
http://col.stb.s-msn.com/i/76/3ADA01320CEC8B31D53FACC0C11E.jpg
http://col.stb.s-msn.com/i/92/51BF117987A3279571F06BEB4AE39D.jpg
http://col.stb.s-msn.com/i/9B/9A6E876BA2F7EAE82392C7E7F6C1C.jpg
http://col.stb.s-msn.com/i/50/8CC964E5503A7F61F8AD22A12024.jpg
http://col.stb.s-msn.com/i/C4/F7EF634B7084DA69AAB5AAD05C8922.jpg
http://col.stb.s-msn.com/i/FB/C8367425D67FA391A5E0F8A3E0276B.jpg
      生成所需的结果（也可在浏览器中查看：）：
      注意事项：

    • 使用XPath
      mod
      运算符确定每行的项

    • 使用模式以两种不同的方式处理相同类型的元素（
      ）

    • 使用AVT（属性值模板）使代码更短，更易于理解

      • 这并没有处理最棘手的部分（排列表的列），过于冗长（
      有相同的结果），而且有缺陷，因为没有alt属性的图像元素不能有，也不能将图像元素作为body元素的子元素。@Jon：让我谈谈您的评论。1.安排表格html是很简单的，我想他可以理解这一部分，但是对于你来说，我更新了我的示例，以完全实现他想要实现的（自己测试）2。你的例子比我的要复杂得多，特别是对于刚开始使用XSLT的人来说，我的例子做了它需要做的事情，而且很简单。我看不出它有多糟糕，你可以把
      img
      放在任何地方，我的例子很有效！我不明白你为什么投了反对票。祝你度过愉快的一天。我同意JohnB的观点-在我看来，简单永远是一个更好的解决方案，尤其是如果你刚刚开始学习一项新技术-尝试掌握这个概念已经够难了，而不必费劲地使用晦涩的速记-我总是说“保持简单愚蠢”@Jon:你的例子很好，我从中学到了一些东西，+1谢谢你。她优雅地说：“就在我担心我们会吵架的时候。FWIW，我认为您的第一个和第二个答案在XSLT（清晰明确的意图声明）的精神下都非常出色，我只是有我所说的反对意见。+1生成列的非常聪明的方法！我从来没有用XSLT做过如此奇特的事情。但是您不需要围绕
      进行循环吗？我们不需要循环，因为表中的应用模板将按顺序每三个pic执行一次，然后在其上运行相应的模板，这反过来又处理接下来的两个pic。或者从另一个角度来看，应用模板是一个循环，尽管有时只对一个项目进行循环。对于应用模板无法做到的每一项，您可以做的很少（如果有的话），反之亦然。区别通常是关于哪个在当时看起来更自然，这在某种程度上取决于编码器的风格。我倾向于将模板应用为更具声明性、更有利于reuse@JohnB为了更全面地回答这个问题，我为每个实现添加了一个示例和一个差异解释。正如我对Dimitre Novatchev所说的，我发现这些解决方案很难理解，因为我无法理解xslt的工作方式。所以非常感谢，我希望有一天我能得到它。好问题（+1）。请参阅我的答案，以了解符合XSLT精神的完整解决方案，以及解决方案中所有重要时刻的说明。：）看起来很优雅。。。但我还不是一个初学者——我从来没有真正的时间去理解xslt的魔力。我试图复制和粘贴您的代码更改图片URL，甚至添加。。。我迷路了。。。不过还是要谢谢你：）+1作为唯一的答案，它不会改变输入或使用砖块模板@Asaf：当然这是一个优雅的解决方案，但是没有“魔法”的介入。另外，相对于
      xsl:apply-templates
      ，对
      xsl:for-each
      指令的偏好并不是XSLT初学者的特权，这是因为存在一些误解 
      <?xml version="1.0" encoding="ISO-8859-1"?>
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">

<xsl:template match="/">
<html>
<body>
  <table> 
  <xsl:for-each select="pics/pic">
    <tr>
      <xsl:for-each select="td">
        <td><img>
          <xsl:attribute name="src">
            <xsl:value-of select="no//@src"/>
          </xsl:attribute>
          <xsl:attribute name="width">
            <xsl:value-of select="no//@width"/>
          </xsl:attribute>
          <xsl:attribute name="height">
            <xsl:value-of select="no//@height"/>
          </xsl:attribute>
        </img></td>
      </xsl:for-each>
    </tr>
  </xsl:for-each>
  </table>
</body>
</html>
</xsl:template>
</xsl:stylesheet>

      <xsl:template match="pics">
    <table>
        <xsl:apply-templates select="pic[position() mod 3 = 1]"/>
    </table>
</xsl:template>
<xsl:template match="pic[position() mod 3 = 1]">
    <tr>
        <td>
            <xsl:if test="2 &gt; count(following-sibling::pic)">
                <xsl:attribute name="colspan">
                    <xsl:value-of select="3 - count(following-sibling::pic)"/>
                </xsl:attribute>
            </xsl:if>
            <img src="{.}" alt="" />
        </td>
        <xsl:apply-templates select="following-sibling::pic[3 &gt; position()]" />
    </tr>
</xsl:template>
<xsl:template match="pic">
    <td><img src="{.}" alt=""/></td>
</xsl:template>

      <xsl:template match="pics">
    <table>
    <xsl:for-each select="pic[position() mod 3 = 1]">
            <tr>
                <td>
                    <xsl:if test="2 &gt; count(following-sibling::pic)">
                        <xsl:attribute name="colspan">
                            <xsl:value-of select="3 - count(following-sibling::pic)"/>
                    </xsl:attribute>
                    </xsl:if>
                    <img src="{.}" alt="" />
                </td>
                <xsl:for-each select="following-sibling::pic[3 &gt; position()]">
                    <td><img src="{.}" alt=""/></td>
                </xsl:for-each>
            </tr>
        </xsl:for-each>
    </table>
</xsl:template>

      <xsl:stylesheet version="1.0"
    xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
    <xsl:output omit-xml-declaration="yes" indent="yes"/>

    <xsl:param name="pNumCols" select="3"/>

 <xsl:template match="pics">
  <table cellspacing="2" cellpadding="2" border="0">
   <xsl:apply-templates select="pic[position() mod $pNumCols = 1]"/>
  </table>
 </xsl:template>

 <xsl:template match="pic">
   <tr>
    <xsl:apply-templates mode="process" select=
    "(. | following-sibling::pic)[not(position() > $pNumCols)]"/>
   </tr>
 </xsl:template>

 <xsl:template match="pic" mode="process">
   <td><img src="{.}" width="150" height="120" /></td>
 </xsl:template>
</xsl:stylesheet>

      <pics>
 <pic no="1">http://col.stb.s-msn.com/i/D7/6A19748C9AA58B938F42099543D2E.jpg</pic>
 <pic no="2">http://col.stb.s-msn.com/i/1F/35A8478AC24EEF95933B5F0E4E394.jpg</pic>
 <pic no="3">http://col.stb.s-msn.com/i/76/3ADA01320CEC8B31D53FACC0C11E.jpg</pic>
 <pic no="4">http://col.stb.s-msn.com/i/92/51BF117987A3279571F06BEB4AE39D.jpg</pic>
 <pic no="5">http://col.stb.s-msn.com/i/9B/9A6E876BA2F7EAE82392C7E7F6C1C.jpg</pic>
 <pic no="6">http://col.stb.s-msn.com/i/50/8CC964E5503A7F61F8AD22A12024.jpg</pic>
 <pic no="7">http://col.stb.s-msn.com/i/C4/F7EF634B7084DA69AAB5AAD05C8922.jpg</pic>
 <pic no="8">http://col.stb.s-msn.com/i/FB/C8367425D67FA391A5E0F8A3E0276B.jpg</pic>
</pics>

      <table cellspacing="2" cellpadding="2" border="0">
   <tr>
      <td>
         <img src="http://col.stb.s-msn.com/i/D7/6A19748C9AA58B938F42099543D2E.jpg" width="150" height="120"/>
      </td>
      <td>
         <img src="http://col.stb.s-msn.com/i/1F/35A8478AC24EEF95933B5F0E4E394.jpg" width="150" height="120"/>
      </td>
      <td>
         <img src="http://col.stb.s-msn.com/i/76/3ADA01320CEC8B31D53FACC0C11E.jpg" width="150" height="120"/>
      </td>
   </tr>
   <tr>
      <td>
         <img src="http://col.stb.s-msn.com/i/92/51BF117987A3279571F06BEB4AE39D.jpg" width="150" height="120"/>
      </td>
      <td>
         <img src="http://col.stb.s-msn.com/i/9B/9A6E876BA2F7EAE82392C7E7F6C1C.jpg" width="150" height="120"/>
      </td>
      <td>
         <img src="http://col.stb.s-msn.com/i/50/8CC964E5503A7F61F8AD22A12024.jpg" width="150" height="120"/>
      </td>
   </tr>
   <tr>
      <td>
         <img src="http://col.stb.s-msn.com/i/C4/F7EF634B7084DA69AAB5AAD05C8922.jpg" width="150" height="120"/>
      </td>
      <td>
         <img src="http://col.stb.s-msn.com/i/FB/C8367425D67FA391A5E0F8A3E0276B.jpg" width="150" height="120"/>
      </td>
   </tr>
</table>