ID搜索并替换为XSLT

时间:2016-12-03 12:29:55

标签: html xml xslt

我有一个具有以下结构的XML文件。

<pokemon_franchise>
<pokemon id="pkmn_001">
    <number>1</number>
    <name>Bulbasaur</name>
    <type1 id="type_12">Grass</type1>
    <type2 id="type_04">Poison</type2>
    <abilities>
        <ability1 id="ablt_065">Overgrow</ability1>
        <hidden_ability id="ablt_034">Chlorophyll</hidden_ability>
    </abilities>
<sprite>https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/1.png</sprite>
    <stats>
        <hp>45</hp>
        <attack>49</attack>
        <defense>49</defense>
        <special_attack>65</special_attack>
        <special_defense>65</special_defense>
        <speed>45</speed>
    </stats>
</pokemon>
<pokemon id="pkmn_002">
    <number>2</number>
    <name>Ivysaur</name>
    <type1 id="type_12">Grass</type1>
    <type2 id="type_04">Poison</type2>
    <abilities>
        <ability1 id="ablt_065">Overgrow</ability1>
        <hidden_ability id="ablt_034">Chlorophyll</hidden_ability>
    </abilities>
    <sprite>https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/2.png</sprite>
    <stats>
        <hp>60</hp>
        <attack>62</attack>
        <defense>63</defense>
        <special_attack>80</special_attack>
        <special_defense>80</special_defense>
        <speed>60</speed>
    </stats>
</pokemon>
<pokemon id="pkmn_003">
    <number>3</number>
    <name>Venusaur</name>
    <type1 id="type_12">Grass</type1>
    <type2 id="type_04">Poison</type2>
    <abilities>
        <ability1 id="ablt_065">Overgrow</ability1>
        <hidden_ability id="ablt_034">Chlorophyll</hidden_ability>
    </abilities>
    <sprite>https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/3.png</sprite>
    <stats>
        <hp>80</hp>
        <attack>82</attack>
        <defense>83</defense>
        <special_attack>100</special_attack>
        <special_defense>100</special_defense>
        <speed>80</speed>
    </stats>
</pokemon>
<pokemon id="pkmn_004">
    <number>4</number>
    <name>Charmander</name>
    <type1 id="type_10">Fire</type1>
    <abilities>
        <ability1 id="ablt_066">Blaze</ability1>
        <hidden_ability id="ablt_094">Solar-power</hidden_ability>
    </abilities>
    <sprite>https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/4.png</sprite>
    <stats>
        <hp>39</hp>
        <attack>52</attack>
        <defense>43</defense>
        <special_attack>60</special_attack>
        <special_defense>50</special_defense>
        <speed>65</speed>
    </stats>
</pokemon>
<pokemon id="pkmn_005">
    <number>5</number>
    <name>Charmeleon</name>
    <type1 id="type_10">Fire</type1>
    <abilities>
        <ability1 id="ablt_066">Blaze</ability1>
        <hidden_ability id="ablt_094">Solar-power</hidden_ability>
    </abilities>
    <sprite>https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/5.png</sprite>
    <stats>
        <hp>58</hp>
        <attack>64</attack>
        <defense>58</defense>
        <special_attack>80</special_attack>
        <special_defense>65</special_defense>
        <speed>80</speed>
    </stats>
</pokemon>
<pokemon id="pkmn_006">
    <number>6</number>
    <name>Charizard</name>
    <type1 id="type_10">Fire</type1>
    <type2 id="type_03">Flying</type2>
    <abilities>
        <ability1 id="ablt_066">Blaze</ability1>
        <hidden_ability id="ablt_094">Solar-power</hidden_ability>
    </abilities>
    <sprite>https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/6.png</sprite>
    <stats>
        <hp>78</hp>
        <attack>84</attack>
        <defense>78</defense>
        <special_attack>109</special_attack>
        <special_defense>85</special_defense>
        <speed>100</speed>
    </stats>
</pokemon>
<pokemon id="pkmn_007">
    <number>7</number>
    <name>Squirtle</name>
    <type1 id="type_11">Water</type1>
    <abilities>
        <ability1 id="ablt_067">Torrent</ability1>
        <hidden_ability id="ablt_044">Rain-dish</hidden_ability>
    </abilities>
    <sprite>https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/7.png</sprite>
    <stats>
        <hp>44</hp>
        <attack>48</attack>
        <defense>65</defense>
        <special_attack>50</special_attack>
        <special_defense>64</special_defense>
        <speed>43</speed>
    </stats>
</pokemon>
<pokemon id="pkmn_008">
    <number>8</number>
    <name>Wartortle</name>
    <type1 id="type_11">Water</type1>
    <abilities>
        <ability1 id="ablt_067">Torrent</ability1>
        <hidden_ability id="ablt_044">Rain-dish</hidden_ability>
    </abilities>                  <sprite>https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/8.png</sprite>
    <stats>
        <hp>59</hp>
        <attack>63</attack>
        <defense>80</defense>
        <special_attack>65</special_attack>
        <special_defense>80</special_defense>
        <speed>58</speed>
    </stats>
</pokemon>
<pokemon id="pkmn_009">
    <number>9</number>
    <name>Blastoise</name>
    <type1 id="type_11">Water</type1>
    <abilities>
        <ability1 id="ablt_067">Torrent</ability1>
        <hidden_ability id="ablt_044">Rain-dish</hidden_ability>
    </abilities>
    <sprite>https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/9.png</sprite>
    <stats>
        <hp>79</hp>
        <attack>83</attack>
        <defense>100</defense>
        <special_attack>85</special_attack>
        <special_defense>105</special_defense>
        <speed>78</speed>
    </stats>
</pokemon>
<type id="type_01">
    <name>Normal</name>
    <damage_relations double_damage_from="type_02" half_damage_to="type_06 type_09"
        no_damage_from="type_08" no_damage_to="type_08"/>
</type>
<type id="type_02">
    <name>Fighting</name>
    <damage_relations double_damage_from="type_03 type_14 type_18"
        double_damage_to="type_01 type_06 type_09 type_15 type_17"
        half_damage_from="type_06 type_07 type_17"
        half_damage_to="type_03 type_04 type_07 type_14 type_18" no_damage_to="type_08"/>
</type>
<type id="type_03">
    <name>Flying</name>
    <damage_relations double_damage_from="type_06 type_13 type_15"
        double_damage_to="type_02 type_07 type_12" half_damage_from="type_02 type_07 type_12"
        half_damage_to="type_06 type_09 type_13" no_damage_from="type_05"/>
</type>
<type id="type_04">
    <name>Poison</name>
    <damage_relations double_damage_from="type_05 type_14" double_damage_to="type_12 type_18"
        half_damage_from="type_02 type_04 type_07 type_12 type_18"
        half_damage_to="type_04 type_05 type_06 type_08" no_damage_to="type_09"/>
</type>
<type id="type_05">
    <name>Ground</name>
    <damage_relations double_damage_from="type_11 type_12 type_15"
        double_damage_to="type_04 type_06 type_09 type_10 type_13"
        half_damage_from="type_04 type_06" half_damage_to="type_07 type_12"
        no_damage_from="type_13" no_damage_to="type_03"/>
</type>
<type id="type_06">
    <name>Rock</name>
    <damage_relations double_damage_from="type_02 type_05 type_09 type_11 type_12"
        double_damage_to="type_03 type_07 type_10 type_15"
        half_damage_from="type_01 type_03 type_04 type_10"
        half_damage_to="type_02 type_05 type_09"/>
</type>
<type id="type_07">
    <name>Bug</name>
    <damage_relations double_damage_from="type_03 type_06 type_10"
        double_damage_to="type_12 type_14 type_17" half_damage_from="type_02 type_05 type_12"
        half_damage_to="type_02 type_03 type_04 type_08 type_09 type_10 type_18"/>
</type>
<type id="type_08">
    <name>Ghost</name>
    <damage_relations double_damage_from="type_08 type_17" double_damage_to="type_08 type_14"
        half_damage_from="type_04 type_07" half_damage_to="type_17"
        no_damage_from="type_01 type_02" no_damage_to="type_01"/>
</type>
<type id="type_09">
    <name>Steel</name>
    <damage_relations double_damage_from="type_02 type_05 type_10"
        double_damage_to="type_06 type_15 type_18"
        half_damage_from="type_01 type_03 type_06 type_07 type_09 type_12 type_14 type_15 type_16 type_18"
        half_damage_to="type_09 type_10 type_11 type_13" no_damage_from="type_04"/>
</type>
<type id="type_10">
    <name>Fire</name>
    <damage_relations double_damage_from="type_05 type_06 type_11"
        double_damage_to="type_07 type_09 type_12 type_15"
        half_damage_from="type_07 type_09 type_10 type_12 type_15 type_18"
        half_damage_to="type_06 type_10 type_11 type_16"/>
</type>
<type id="type_11">
    <name>Water</name>
    <damage_relations double_damage_from="type_12 type_13"
        double_damage_to="type_05 type_06 type_10"
        half_damage_from="type_09 type_10 type_11 type_15"
        half_damage_to="type_11 type_12 type_16"/>
</type>
<type id="type_12">
    <name>Grass</name>
    <damage_relations double_damage_from="type_03 type_04 type_07 type_10 type_15"
        double_damage_to="type_05 type_06 type_11"
        half_damage_from="type_05 type_11 type_12 type_13"
        half_damage_to="type_03 type_04 type_07 type_09 type_10 type_12 type_16"/>
</type>
<type id="type_13">
    <name>Electric</name>
    <damage_relations double_damage_from="type_05" double_damage_to="type_03 type_11"
        half_damage_from="type_03 type_09 type_13" half_damage_to="type_12 type_13 type_16"
        no_damage_to="type_05"/>
</type>
<type id="type_14">
    <name>Psychic</name>
    <damage_relations double_damage_from="type_07 type_08 type_17"
        double_damage_to="type_02 type_04" half_damage_from="type_02 type_14"
        half_damage_to="type_09 type_14" no_damage_to="type_17"/>
</type>
<type id="type_15">
    <name>Ice</name>
    <damage_relations double_damage_from="type_02 type_06 type_09 type_10"
        double_damage_to="type_03 type_05 type_12 type_16" half_damage_from="type_15"
        half_damage_to="type_09 type_10 type_11 type_15"/>
</type>
<type id="type_16">
    <name>Dragon</name>
    <damage_relations double_damage_from="type_15 type_16 type_18" double_damage_to="type_16"
        half_damage_from="type_10 type_11 type_12 type_13" half_damage_to="type_09"
        no_damage_to="type_18"/>
</type>
<type id="type_17">
    <name>Dark</name>
    <damage_relations double_damage_from="type_02 type_07 type_18"
        double_damage_to="type_08 type_14" half_damage_from="type_08 type_17"
        half_damage_to="type_02 type_17 type_18" no_damage_from="type_14"/>
</type>
<type id="type_18">
    <name>Fairy</name>
    <damage_relations double_damage_from="type_04 type_09"
        double_damage_to="type_02 type_16 type_17" half_damage_from="type_02 type_07 type_17"
        half_damage_to="type_04 type_09 type_10" no_damage_from="type_16"/>
</type>
<ability id="ablt_001">
    <name>Stench</name>
    <effect>Has a 10% chance of making target Pokémon flinch with each hit.</effect>
</ability>
<ability id="ablt_002">
    <name>Drizzle</name>
    <effect>Summons rain that lasts indefinitely upon entering battle.</effect>
</ability>
<ability id="ablt_003">
    <name>Speed-boost</name>
    <effect>Raises Speed one stage after each turn.</effect>
</ability>
<ability id="ablt_004">
    <name>Battle-armor</name>
    <effect>Protects against critical hits.</effect>
</ability>
<ability id="ablt_005">
    <name>Sturdy</name>
    <effect>Prevents being KOed from full HP, leaving 1 HP instead. Protects against the one-hit
        KO moves regardless of HP.</effect>
</ability>
<ability id="ablt_006">
    <name>Damp</name>
    <effect>Prevents self destruct, explosion, and aftermath from working while the Pokémon
        is in battle.</effect>
</ability>
<ability id="ablt_007">
    <name>Limber</name>
    <effect>Prevents paralysis.</effect>
</ability>
<ability id="ablt_008">
    <name>Sand-veil</name>
    <effect>Increases evasion to 1.25x during a sandstorm. Protects against sandstorm
        damage.</effect>
</ability>
<ability id="ablt_009">
    <name>Static</name>
    <effect>Has a 30% chance of paralyzing attacking Pokémon on contact.</effect>
</ability>
<ability id="ablt_010">
    <name>Volt-absorb</name>
    <effect>Absorbs electric moves, healing for 1/4 max HP.</effect>
</ability>
<ability id="ablt_011">
    <name>Water-absorb</name>
    <effect>Absorbs water moves, healing for 1/4 max HP.</effect>
</ability>
<ability id="ablt_012">
    <name>Oblivious</name>
    <effect>Prevents infatuation and protects against captivate.</effect>
</ability>
<ability id="ablt_013">
    <name>Cloud-nine</name>
    <effect>Negates all effects of weather, but does not prevent the weather itself.</effect>
</ability>
<ability id="ablt_014">
    <name>Compound-eyes</name>
    <effect>Increases moves' accuracy to 1.3x.</effect>
</ability>
<ability id="ablt_015">
    <name>Insomnia</name>
    <effect>Prevents sleep.</effect>
</ability>
<ability id="ablt_016">
    <name>Color-change</name>
    <effect>Changes type to match when hit by a damaging move.</effect>
</ability>
<ability id="ablt_017">
    <name>Immunity</name>
    <effect>Prevents poison.</effect>
</ability>
</pokemon_franchise>

显然整个XML文件太大了,无法放在这里。我添加了一些口袋妖怪元素(它们更多),所有类型元素和一些能力元素(它们还有更多)。

我想生成一个HTML文件,其中包含每种类型的按钮,当您按下特定类型的按钮时,会出现一个模态(引导程序),其中显示一个表格,其中包含每个损坏关系及其下面的相应类型,每个类型都在一个单独的行和所有使用XSLT的行。

到目前为止,我所做的只是生成带有表的模态,但它将每个类型显示为其id而不是其名称,当然不是在单独的行中。这是现在的截图。

Type Page Screenshot

此处还有该页面的XSLT代码。这是整个页面的模板,该代码位于body标签内。

<div class="row">
  <xsl:for-each select="//type">
    <div class="col-md-2 text-center">
      <a class="btn btn-primary btn-lg btn-block" data-toggle="modal" data-target="#typeModal{@id}">
        <xsl:value-of select="name"/>
      </a>
      <xsl:apply-templates select="."/>
    </div>
  </xsl:for-each>
</div>

这是类型模板。

<xsl:template match="type">
  <div class="modal fade" id="typeModal{@id}" tabindex="-1" role="dialog"
       aria-labelledby="myModalLabel">
    <div class="modal-dialog" role="document">
      <div class="modal-content">
        <div class="modal-header">
          <h1>
            <xsl:value-of select="name"/> Type
          </h1>
        </div>
        <div class="modal-body">
          <div class="row">
            <div class="col-md-12">
              <div class="table-responsive">
                <table class="table">
                  <thead class="text-center">
                    <tr>
                      <xsl:if test="damage_relations/@double_damage_from">
                        <th>Double Damage From</th>
                      </xsl:if>
                      <xsl:if test="damage_relations/@half_damage_from">
                        <th>Half Damage From</th>
                      </xsl:if>
                      <xsl:if test="damage_relations/@no_damage_from">
                        <th>No Damage From</th>
                      </xsl:if>
                      <xsl:if test="damage_relations/@double_damage_to">
                        <th>Double Damage To</th>
                      </xsl:if>
                      <xsl:if test="damage_relations/@half_damage_to">
                        <th>Half Damage To</th>
                      </xsl:if>
                      <xsl:if test="damage_relations/@no_damage_to">
                        <th>No Damage To</th>
                      </xsl:if>
                    </tr>
                  </thead>
                  <tr class="text-center">
                    <xsl:if test="damage_relations/@double_damage_from">
                      <td>
                        <xsl:value-of select="damage_relations/@double_damage_from"/>
                      </td>
                    </xsl:if>
                    <xsl:if test="damage_relations/@half_damage_from">
                      <td>
                        <xsl:value-of select="damage_relations/@half_damage_from"/>
                      </td>
                    </xsl:if>
                    <xsl:if test="damage_relations/@no_damage_from">
                      <td>
                        <xsl:value-of select="damage_relations/@no_damage_from"/>
                      </td>
                    </xsl:if>
                    <xsl:if test="damage_relations/@double_damage_to">
                      <td>
                        <xsl:value-of select="damage_relations/@double_damage_to"/>
                      </td>
                    </xsl:if>
                    <xsl:if test="damage_relations/@half_damage_to">
                      <td>
                        <xsl:value-of select="damage_relations/@half_damage_to"/>
                      </td>
                    </xsl:if>
                    <xsl:if test="damage_relations/@no_damage_to">
                      <td>
                        <xsl:value-of select="damage_relations/@no_damage_to"/>
                      </td>
                    </xsl:if>
                  </tr>
                </table>
              </div>
            </div>
          </div>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-primary" data-dismiss="modal">Close</button>
        </div>
      </div>
      <!-- /.modal-content -->
    </div>
    <!-- /.modal-dialog -->
  </div>
  <!-- /.modal -->
</xsl:template>

这实际上是我的第一个问题,所以如果我写错了指出它,我就可以纠正它。谢谢!

1 个答案:

答案 0 :(得分:0)

您需要拆分ID引用并最好使用密钥来访问它们所指的元素:

<?xml version="1.0" encoding="UTF-8"?>
<xsl:stylesheet xmlns:xsl="http://www.w3.org/1999/XSL/Transform"
  xmlns:xs="http://www.w3.org/2001/XMLSchema"
  exclude-result-prefixes="xs"
  version="2.0">

  <xsl:output indent="yes"/>

  <xsl:key name="id" match="/pokemon_franchise/type" use="@id"/>

  <xsl:template match="type">
    <div class="modal fade" id="typeModal{@id}" tabindex="-1" role="dialog"
      aria-labelledby="myModalLabel">
      <div class="modal-dialog" role="document">
        <div class="modal-content">
          <div class="modal-header">
            <h1>
              <xsl:value-of select="name"/> Type
            </h1>
          </div>
          <div class="modal-body">
            <div class="row">
              <div class="col-md-12">
                <div class="table-responsive">
                  <table class="table">
                    <thead class="text-center">
                      <tr>
                        <xsl:if test="damage_relations/@double_damage_from">
                          <th>Double Damage From</th>
                        </xsl:if>
                        <xsl:if test="damage_relations/@half_damage_from">
                          <th>Half Damage From</th>
                        </xsl:if>
                        <xsl:if test="damage_relations/@no_damage_from">
                          <th>No Damage From</th>
                        </xsl:if>
                        <xsl:if test="damage_relations/@double_damage_to">
                          <th>Double Damage To</th>
                        </xsl:if>
                        <xsl:if test="damage_relations/@half_damage_to">
                          <th>Half Damage To</th>
                        </xsl:if>
                        <xsl:if test="damage_relations/@no_damage_to">
                          <th>No Damage To</th>
                        </xsl:if>
                      </tr>
                    </thead>
                    <tr class="text-center">
                      <xsl:apply-templates mode="resolve-references" select="damage_relations"/>
                    </tr>
                  </table>
                </div>
              </div>
            </div>
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-primary" data-dismiss="modal">Close</button>
          </div>
        </div>
        <!-- /.modal-content -->
      </div>
      <!-- /.modal-dialog -->
    </div>
    <!-- /.modal -->
  </xsl:template>  

  <xsl:template match="damage_relations" mode="resolve-references">
    <xsl:for-each 
      select="(@double_damage_from, @half_damage_from, @no_damage_from, @double_damage_to, @half_damage_to, @no_damage_to)">
      <td>
        <xsl:for-each select="key('id', tokenize(., '\s+'))">
          <xsl:if test="position()>1">
            <br/>
          </xsl:if>
          <xsl:value-of select="name"/>
        </xsl:for-each>
      </td>
    </xsl:for-each>
  </xsl:template>

</xsl:stylesheet>

输出:

<div class="modal fade" id="typeModaltype_01" tabindex="-1" role="dialog"
  aria-labelledby="myModalLabel">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h1>Normal Type </h1>
      </div>
      <div class="modal-body">
        <div class="row">
          <div class="col-md-12">
            <div class="table-responsive">
              <table class="table">
                <thead class="text-center">
                  <tr>
                    <th>Double Damage From</th>
                    <th>No Damage From</th>
                    <th>Half Damage To</th>
                    <th>No Damage To</th>
                  </tr>
                </thead>
                <tr class="text-center">
                  <td>Fighting</td>
                  <td>Ghost</td>
                  <td>Rock<br/>Steel</td>
                  <td>Ghost</td>
                </tr>
              </table>
            </div>
          </div>
        </div>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-primary" data-dismiss="modal">Close</button>
      </div>
    </div>
  </div>
</div>
<div class="modal fade" id="typeModaltype_02" tabindex="-1" role="dialog"
  aria-labelledby="myModalLabel">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h1>Fighting Type </h1>
      </div>
      <div class="modal-body">
        <div class="row">
          <div class="col-md-12">
            <div class="table-responsive">
              <table class="table">
                <thead class="text-center">
                  <tr>
                    <th>Double Damage From</th>
                    <th>Half Damage From</th>
                    <th>Double Damage To</th>
                    <th>Half Damage To</th>
                    <th>No Damage To</th>
                  </tr>
                </thead>
                <tr class="text-center">
                  <td>Flying<br/>Psychic<br/>Fairy</td>
                  <td>Rock<br/>Bug<br/>Dark</td>
                  <td>Normal<br/>Rock<br/>Steel<br/>Ice<br/>Dark</td>
                  <td>Flying<br/>Poison<br/>Bug<br/>Psychic<br/>Fairy</td>
                  <td>Ghost</td>
                </tr>
              </table>
            </div>
          </div>
        </div>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-primary" data-dismiss="modal">Close</button>
      </div>
    </div>
  </div>
</div>
<div class="modal fade" id="typeModaltype_03" tabindex="-1" role="dialog"
  aria-labelledby="myModalLabel">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h1>Flying Type </h1>
      </div>
      <div class="modal-body">
        <div class="row">
          <div class="col-md-12">
            <div class="table-responsive">
              <table class="table">
                <thead class="text-center">
                  <tr>
                    <th>Double Damage From</th>
                    <th>Half Damage From</th>
                    <th>No Damage From</th>
                    <th>Double Damage To</th>
                    <th>Half Damage To</th>
                  </tr>
                </thead>
                <tr class="text-center">
                  <td>Rock<br/>Electric<br/>Ice</td>
                  <td>Fighting<br/>Bug<br/>Grass</td>
                  <td>Ground</td>
                  <td>Fighting<br/>Bug<br/>Grass</td>
                  <td>Rock<br/>Steel<br/>Electric</td>
                </tr>
              </table>
            </div>
          </div>
        </div>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-primary" data-dismiss="modal">Close</button>
      </div>
    </div>
  </div>
</div>
<div class="modal fade" id="typeModaltype_04" tabindex="-1" role="dialog"
  aria-labelledby="myModalLabel">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h1>Poison Type </h1>
      </div>
      <div class="modal-body">
        <div class="row">
          <div class="col-md-12">
            <div class="table-responsive">
              <table class="table">
                <thead class="text-center">
                  <tr>
                    <th>Double Damage From</th>
                    <th>Half Damage From</th>
                    <th>Double Damage To</th>
                    <th>Half Damage To</th>
                    <th>No Damage To</th>
                  </tr>
                </thead>
                <tr class="text-center">
                  <td>Ground<br/>Psychic</td>
                  <td>Fighting<br/>Poison<br/>Bug<br/>Grass<br/>Fairy</td>
                  <td>Grass<br/>Fairy</td>
                  <td>Poison<br/>Ground<br/>Rock<br/>Ghost</td>
                  <td>Steel</td>
                </tr>
              </table>
            </div>
          </div>
        </div>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-primary" data-dismiss="modal">Close</button>
      </div>
    </div>
  </div>
</div>
<div class="modal fade" id="typeModaltype_05" tabindex="-1" role="dialog"
  aria-labelledby="myModalLabel">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h1>Ground Type </h1>
      </div>
      <div class="modal-body">
        <div class="row">
          <div class="col-md-12">
            <div class="table-responsive">
              <table class="table">
                <thead class="text-center">
                  <tr>
                    <th>Double Damage From</th>
                    <th>Half Damage From</th>
                    <th>No Damage From</th>
                    <th>Double Damage To</th>
                    <th>Half Damage To</th>
                    <th>No Damage To</th>
                  </tr>
                </thead>
                <tr class="text-center">
                  <td>Water<br/>Grass<br/>Ice</td>
                  <td>Poison<br/>Rock</td>
                  <td>Electric</td>
                  <td>Poison<br/>Rock<br/>Steel<br/>Fire<br/>Electric</td>
                  <td>Bug<br/>Grass</td>
                  <td>Flying</td>
                </tr>
              </table>
            </div>
          </div>
        </div>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-primary" data-dismiss="modal">Close</button>
      </div>
    </div>
  </div>
</div>
<div class="modal fade" id="typeModaltype_06" tabindex="-1" role="dialog"
  aria-labelledby="myModalLabel">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h1>Rock Type </h1>
      </div>
      <div class="modal-body">
        <div class="row">
          <div class="col-md-12">
            <div class="table-responsive">
              <table class="table">
                <thead class="text-center">
                  <tr>
                    <th>Double Damage From</th>
                    <th>Half Damage From</th>
                    <th>Double Damage To</th>
                    <th>Half Damage To</th>
                  </tr>
                </thead>
                <tr class="text-center">
                  <td>Fighting<br/>Ground<br/>Steel<br/>Water<br/>Grass</td>
                  <td>Normal<br/>Flying<br/>Poison<br/>Fire</td>
                  <td>Flying<br/>Bug<br/>Fire<br/>Ice</td>
                  <td>Fighting<br/>Ground<br/>Steel</td>
                </tr>
              </table>
            </div>
          </div>
        </div>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-primary" data-dismiss="modal">Close</button>
      </div>
    </div>
  </div>
</div>
<div class="modal fade" id="typeModaltype_07" tabindex="-1" role="dialog"
  aria-labelledby="myModalLabel">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h1>Bug Type </h1>
      </div>
      <div class="modal-body">
        <div class="row">
          <div class="col-md-12">
            <div class="table-responsive">
              <table class="table">
                <thead class="text-center">
                  <tr>
                    <th>Double Damage From</th>
                    <th>Half Damage From</th>
                    <th>Double Damage To</th>
                    <th>Half Damage To</th>
                  </tr>
                </thead>
                <tr class="text-center">
                  <td>Flying<br/>Rock<br/>Fire</td>
                  <td>Fighting<br/>Ground<br/>Grass</td>
                  <td>Grass<br/>Psychic<br/>Dark</td>
                  <td>Fighting<br/>Flying<br/>Poison<br/>Ghost<br/>Steel<br/>Fire<br/>Fairy</td>
                </tr>
              </table>
            </div>
          </div>
        </div>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-primary" data-dismiss="modal">Close</button>
      </div>
    </div>
  </div>
</div>
<div class="modal fade" id="typeModaltype_08" tabindex="-1" role="dialog"
  aria-labelledby="myModalLabel">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h1>Ghost Type </h1>
      </div>
      <div class="modal-body">
        <div class="row">
          <div class="col-md-12">
            <div class="table-responsive">
              <table class="table">
                <thead class="text-center">
                  <tr>
                    <th>Double Damage From</th>
                    <th>Half Damage From</th>
                    <th>No Damage From</th>
                    <th>Double Damage To</th>
                    <th>Half Damage To</th>
                    <th>No Damage To</th>
                  </tr>
                </thead>
                <tr class="text-center">
                  <td>Ghost<br/>Dark</td>
                  <td>Poison<br/>Bug</td>
                  <td>Normal<br/>Fighting</td>
                  <td>Ghost<br/>Psychic</td>
                  <td>Dark</td>
                  <td>Normal</td>
                </tr>
              </table>
            </div>
          </div>
        </div>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-primary" data-dismiss="modal">Close</button>
      </div>
    </div>
  </div>
</div>
<div class="modal fade" id="typeModaltype_09" tabindex="-1" role="dialog"
  aria-labelledby="myModalLabel">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h1>Steel Type </h1>
      </div>
      <div class="modal-body">
        <div class="row">
          <div class="col-md-12">
            <div class="table-responsive">
              <table class="table">
                <thead class="text-center">
                  <tr>
                    <th>Double Damage From</th>
                    <th>Half Damage From</th>
                    <th>No Damage From</th>
                    <th>Double Damage To</th>
                    <th>Half Damage To</th>
                  </tr>
                </thead>
                <tr class="text-center">
                  <td>Fighting<br/>Ground<br/>Fire</td>
                  <td>Normal<br/>Flying<br/>Rock<br/>Bug<br/>Steel<br/>Grass<br/>Psychic<br/>Ice<br/>Dragon<br/>Fairy</td>
                  <td>Poison</td>
                  <td>Rock<br/>Ice<br/>Fairy</td>
                  <td>Steel<br/>Fire<br/>Water<br/>Electric</td>
                </tr>
              </table>
            </div>
          </div>
        </div>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-primary" data-dismiss="modal">Close</button>
      </div>
    </div>
  </div>
</div>
<div class="modal fade" id="typeModaltype_10" tabindex="-1" role="dialog"
  aria-labelledby="myModalLabel">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h1>Fire Type </h1>
      </div>
      <div class="modal-body">
        <div class="row">
          <div class="col-md-12">
            <div class="table-responsive">
              <table class="table">
                <thead class="text-center">
                  <tr>
                    <th>Double Damage From</th>
                    <th>Half Damage From</th>
                    <th>Double Damage To</th>
                    <th>Half Damage To</th>
                  </tr>
                </thead>
                <tr class="text-center">
                  <td>Ground<br/>Rock<br/>Water</td>
                  <td>Bug<br/>Steel<br/>Fire<br/>Grass<br/>Ice<br/>Fairy</td>
                  <td>Bug<br/>Steel<br/>Grass<br/>Ice</td>
                  <td>Rock<br/>Fire<br/>Water<br/>Dragon</td>
                </tr>
              </table>
            </div>
          </div>
        </div>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-primary" data-dismiss="modal">Close</button>
      </div>
    </div>
  </div>
</div>
<div class="modal fade" id="typeModaltype_11" tabindex="-1" role="dialog"
  aria-labelledby="myModalLabel">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h1>Water Type </h1>
      </div>
      <div class="modal-body">
        <div class="row">
          <div class="col-md-12">
            <div class="table-responsive">
              <table class="table">
                <thead class="text-center">
                  <tr>
                    <th>Double Damage From</th>
                    <th>Half Damage From</th>
                    <th>Double Damage To</th>
                    <th>Half Damage To</th>
                  </tr>
                </thead>
                <tr class="text-center">
                  <td>Grass<br/>Electric</td>
                  <td>Steel<br/>Fire<br/>Water<br/>Ice</td>
                  <td>Ground<br/>Rock<br/>Fire</td>
                  <td>Water<br/>Grass<br/>Dragon</td>
                </tr>
              </table>
            </div>
          </div>
        </div>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-primary" data-dismiss="modal">Close</button>
      </div>
    </div>
  </div>
</div>
<div class="modal fade" id="typeModaltype_12" tabindex="-1" role="dialog"
  aria-labelledby="myModalLabel">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h1>Grass Type </h1>
      </div>
      <div class="modal-body">
        <div class="row">
          <div class="col-md-12">
            <div class="table-responsive">
              <table class="table">
                <thead class="text-center">
                  <tr>
                    <th>Double Damage From</th>
                    <th>Half Damage From</th>
                    <th>Double Damage To</th>
                    <th>Half Damage To</th>
                  </tr>
                </thead>
                <tr class="text-center">
                  <td>Flying<br/>Poison<br/>Bug<br/>Fire<br/>Ice</td>
                  <td>Ground<br/>Water<br/>Grass<br/>Electric</td>
                  <td>Ground<br/>Rock<br/>Water</td>
                  <td>Flying<br/>Poison<br/>Bug<br/>Steel<br/>Fire<br/>Grass<br/>Dragon</td>
                </tr>
              </table>
            </div>
          </div>
        </div>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-primary" data-dismiss="modal">Close</button>
      </div>
    </div>
  </div>
</div>
<div class="modal fade" id="typeModaltype_13" tabindex="-1" role="dialog"
  aria-labelledby="myModalLabel">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h1>Electric Type </h1>
      </div>
      <div class="modal-body">
        <div class="row">
          <div class="col-md-12">
            <div class="table-responsive">
              <table class="table">
                <thead class="text-center">
                  <tr>
                    <th>Double Damage From</th>
                    <th>Half Damage From</th>
                    <th>Double Damage To</th>
                    <th>Half Damage To</th>
                    <th>No Damage To</th>
                  </tr>
                </thead>
                <tr class="text-center">
                  <td>Ground</td>
                  <td>Flying<br/>Steel<br/>Electric</td>
                  <td>Flying<br/>Water</td>
                  <td>Grass<br/>Electric<br/>Dragon</td>
                  <td>Ground</td>
                </tr>
              </table>
            </div>
          </div>
        </div>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-primary" data-dismiss="modal">Close</button>
      </div>
    </div>
  </div>
</div>
<div class="modal fade" id="typeModaltype_14" tabindex="-1" role="dialog"
  aria-labelledby="myModalLabel">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h1>Psychic Type </h1>
      </div>
      <div class="modal-body">
        <div class="row">
          <div class="col-md-12">
            <div class="table-responsive">
              <table class="table">
                <thead class="text-center">
                  <tr>
                    <th>Double Damage From</th>
                    <th>Half Damage From</th>
                    <th>Double Damage To</th>
                    <th>Half Damage To</th>
                    <th>No Damage To</th>
                  </tr>
                </thead>
                <tr class="text-center">
                  <td>Bug<br/>Ghost<br/>Dark</td>
                  <td>Fighting<br/>Psychic</td>
                  <td>Fighting<br/>Poison</td>
                  <td>Steel<br/>Psychic</td>
                  <td>Dark</td>
                </tr>
              </table>
            </div>
          </div>
        </div>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-primary" data-dismiss="modal">Close</button>
      </div>
    </div>
  </div>
</div>
<div class="modal fade" id="typeModaltype_15" tabindex="-1" role="dialog"
  aria-labelledby="myModalLabel">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h1>Ice Type </h1>
      </div>
      <div class="modal-body">
        <div class="row">
          <div class="col-md-12">
            <div class="table-responsive">
              <table class="table">
                <thead class="text-center">
                  <tr>
                    <th>Double Damage From</th>
                    <th>Half Damage From</th>
                    <th>Double Damage To</th>
                    <th>Half Damage To</th>
                  </tr>
                </thead>
                <tr class="text-center">
                  <td>Fighting<br/>Rock<br/>Steel<br/>Fire</td>
                  <td>Ice</td>
                  <td>Flying<br/>Ground<br/>Grass<br/>Dragon</td>
                  <td>Steel<br/>Fire<br/>Water<br/>Ice</td>
                </tr>
              </table>
            </div>
          </div>
        </div>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-primary" data-dismiss="modal">Close</button>
      </div>
    </div>
  </div>
</div>
<div class="modal fade" id="typeModaltype_16" tabindex="-1" role="dialog"
  aria-labelledby="myModalLabel">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h1>Dragon Type </h1>
      </div>
      <div class="modal-body">
        <div class="row">
          <div class="col-md-12">
            <div class="table-responsive">
              <table class="table">
                <thead class="text-center">
                  <tr>
                    <th>Double Damage From</th>
                    <th>Half Damage From</th>
                    <th>Double Damage To</th>
                    <th>Half Damage To</th>
                    <th>No Damage To</th>
                  </tr>
                </thead>
                <tr class="text-center">
                  <td>Ice<br/>Dragon<br/>Fairy</td>
                  <td>Fire<br/>Water<br/>Grass<br/>Electric</td>
                  <td>Dragon</td>
                  <td>Steel</td>
                  <td>Fairy</td>
                </tr>
              </table>
            </div>
          </div>
        </div>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-primary" data-dismiss="modal">Close</button>
      </div>
    </div>
  </div>
</div>
<div class="modal fade" id="typeModaltype_17" tabindex="-1" role="dialog"
  aria-labelledby="myModalLabel">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h1>Dark Type </h1>
      </div>
      <div class="modal-body">
        <div class="row">
          <div class="col-md-12">
            <div class="table-responsive">
              <table class="table">
                <thead class="text-center">
                  <tr>
                    <th>Double Damage From</th>
                    <th>Half Damage From</th>
                    <th>No Damage From</th>
                    <th>Double Damage To</th>
                    <th>Half Damage To</th>
                  </tr>
                </thead>
                <tr class="text-center">
                  <td>Fighting<br/>Bug<br/>Fairy</td>
                  <td>Ghost<br/>Dark</td>
                  <td>Psychic</td>
                  <td>Ghost<br/>Psychic</td>
                  <td>Fighting<br/>Dark<br/>Fairy</td>
                </tr>
              </table>
            </div>
          </div>
        </div>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-primary" data-dismiss="modal">Close</button>
      </div>
    </div>
  </div>
</div>
<!-- Further output omitted -->