XML - Создание формы заказа

Question

У меня есть домашнее задание, которое просит создать форму заказа. Предполагается, что форма заказа включает список предметов, доступных пользователю для покупки, который составлен из XML-документа и оформлен в виде файла XSL.

Я хорошо прошел через эту часть и загрузил XSL в HTML DOM с помощью JavaScript. Теперь я застрял, пытаясь понять, как я буду обрабатывать данные. Мне нужно умножить количество (которое вводится пользователем) и цену (которое вводится из XML).

Я полностью застрял и был бы очень признателен за любые советы о том, куда идти отсюда.

Мой XSLT:

<table width="0" border="1" cellspacing="3" cellpadding="5">
  <tr>
    <td>Qty</td>
    <td>Item Description</td>
    <td>Price</td>
  </tr>
 <xsl:for-each select="//item">
  <tr>
    <td><input name="top" type="text" onchange="calculate()" value="0" size="4" /></td>
    <td>Item <xsl:value-of select="id"/></td>
    <td><xsl:value-of select="price"/></td>
  </tr>
  </xsl:for-each>
</table>

Некоторые XML:

<productcatalog>

        <item>
            <id>001</id>
            <name>Item #1</name>
            <price>10</price>
        </item>
        <item>
            <id>002</id>            
            <name>Item #2</name>
            <price>20</price>
        </item>
        <item>
            <id>003</id>
            <name>Item #3</name>
            <price>30</price>
        </item>
        <item>
            <id>004</id>
            <name>Item #4</name>
            <price>40</price>
        </item>



</productcatalog>

Answer 1

Так как количество от пользователя, вы не можете реализовать это с XSL.Ваша таблица стилей XSL должна выводить скрипт, который выполняет вычисления.

Если вы можете использовать библиотеку javascript (например, jQuery), эта задача значительно проще, но вы, безусловно, можете сделать это без нее.

Ваша функция вычисления должна:

1. сохранить количество и преобразовать его в число.Элемент ввода с количеством вызовет событие.
2. найдите строку, которая инициировала событие, пройдя вверх по родительским узлам.
3. найдите цену в этом ряду, пройдя назад.Преобразовать в число.
4. умножить цену на количество и вставить в виде строки в соответствующий TD.(вы используете атрибут textContent или innerText)

Сохранение цены может быть проблемой.Новый способ (открыт с HTML5) заключается в использовании атрибута с префиксом data-.Вы можете добавить data-price к выводу html как удобное место, чтобы получить цену.Вы даже можете поместить это на сам входной узел, чтобы вам не приходилось перемещаться по узлам, чтобы найти цену.