Версия для печати темы
Нажмите сюда для просмотра этой темы в оригинальном формате
Форум программистов > JavaScript: Применение библиотек > Изменение цен "налету"


Автор: Another 28.9.2012, 20:20
Нужно изменить цены в таблице по курсу валют.
Должно получиться что-то типа как тут - _ttp://www.isplicense.ru/services/ispsystem/ispmanager/
В таблице цены указаны в $ далее нужно разделить на курс и отобразить новые цены в выбранной валюте.
Буду очень рад увидеть наглядный пример.

Автор: Cheloveck 29.9.2012, 00:15
Цитата(Another @  28.9.2012,  21:20 Найти цитируемый пост)
нужно разделить на курс и отобразить новые цены в выбранной валюте

Умножить

Код

<html>
    <head>
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js" type="text/javascript"></script>
    </head>
    <body>
        <table border="1"  id="table">
            <tr>
                <th>Price, $</th>
                <th>Price, Selected currency</th>
            </tr>
            <tr>
                <td class="dollar">100.0</td>
                <td class="currency">-</td>
            </tr>
            <tr>
                <td class="dollar">16.25</td>
                <td class="currency">-</td>
            </tr>
            <tr>
                <td class="dollar">32.05</td>
                <td class="currency">-</td>
            </tr>
            <tr>
                <td class="dollar">14.20</td>
                <td class="currency">-</td>
            </tr>
        <table>

        <select id="currency">
            <option value="31.10" selected="selected">Currency 1</option>
            <option value="1.25">Currency 2</option>
            <option value="142.14">Currency 3</option>
            <option value="13.02">Currency 4</option>
        <select>

        <button id="calc-btn">Calculate</button>

        <script type="text/javascript">
            $("#calc-btn").click(function() {
                var currencyPrice = parseFloat($("#currency").val());
                $("#table tr").each(function() {
                    var $this = $(this);
                    var $dollar = $this.find(".dollar");
                    if($dollar.length == 0) return;
                    var dollarPrice = parseFloat($dollar.html());
                    var newPrice = currencyPrice * dollarPrice;
                    $this.find(".currency").html(newPrice.toString());
                });
            });
        </script>
    </body>
</html>

Автор: Another 29.9.2012, 10:27
Цитата

Умножить

У меня в БД отношение к доллару. Поэтому - разделить.

Cheloveck, как я понял, тут производятся операции с ячейками dollar. Как сделать, что бы менялось само значение ячейки и менялось оно только относительно тех чесел, что введены сразу (в долларах). Может, их записать куда-то в ID ячейки или как?

Автор: Cheloveck 29.9.2012, 14:44
Цитата(Another @  29.9.2012,  11:27 Найти цитируемый пост)
Может, их записать куда-то в ID ячейки или как? 

В data-аттрибут
Код

<html>
    <head>
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js" type="text/javascript"></script>
    </head>
    <body>
        <table border="1"  id="table">
            <tr>
                <th>Price, Selected currency</th>
            </tr>
            <tr>
                <td data-dollar="100.0" class="currency">100.0</td>
            </tr>
            <tr>
                <td data-dollar="16.25" class="currency">16.25</td>
            </tr>
            <tr>
                <td data-dollar="32.05" class="currency">32.05</td>
            </tr>
            <tr>
                <td data-dollar="14.20" class="currency">14.20</td>
            </tr>
        </table>

        <select id="currency">
            <option value="31.10" selected="selected">Currency 1</option>
            <option value="1.25">Currency 2</option>
            <option value="142.14">Currency 3</option>
            <option value="13.02">Currency 4</option>
        <select>

        <button id="calc-btn">Calculate</button>

        <script type="text/javascript">
            $("#calc-btn").click(function() {
                var currencyPrice = parseFloat($("#currency").val());
                $("#table .currency").each(function() {
                    var $this = $(this);
                    var dollarPrice = parseFloat($this.data("dollar"));
                    var newPrice = currencyPrice * dollarPrice;
                    $this.html(newPrice.toString());
                });
            });
        </script>
    </body>
</html>

Автор: Another 29.9.2012, 17:05
Это то, что нужно. буду допиливать.
Большое спасибо!

Автор: Another 29.9.2012, 18:55
Вопросик. А как при изменении курса добавлять приставку $, EUR...?

Автор: Cheloveck 29.9.2012, 22:27
Цитата(Another @  29.9.2012,  19:55 Найти цитируемый пост)
А как при изменении курса добавлять приставку $, EUR...?

Записать в data-аттрибут option`а отображаемое имя и подставлять его в имя колонки
Код

<html>
    <head>
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js" type="text/javascript"></script>
    </head>
    <body>
        <table border="1"  id="table">
            <tr>
                <th id="currency-col-title">Price, $</th>
            </tr>
            <tr>
                <td data-dollar="100.0" class="currency">100.0</td>
            </tr>
            <tr>
                <td data-dollar="16.25" class="currency">16.25</td>
            </tr>
            <tr>
                <td data-dollar="32.05" class="currency">32.05</td>
            </tr>
            <tr>
                <td data-dollar="14.20" class="currency">14.20</td>
            </tr>
        </table>

        <select id="currency">
            <option data-display="$" value="1.0" selected="selected">US Dollar</option>
            <option data-display="Rub" value="31.10" selected="selected">Russian Ruble</option>
            <option data-display="EU" value="0.8">Euro</option>
        <select>

        <button id="calc-btn">Calculate</button>

        <script type="text/javascript">
            $("#calc-btn").click(function() {
                var $currency = $("#currency");
                var currencyDisplayName = $currency.find(":selected").data("display")
                $("#currency-col-title").html("Price, " + currencyDisplayName)
                var currencyPrice = parseFloat($currency.val());
                $("#table .currency").each(function() {
                    var $this = $(this);
                    var dollarPrice = parseFloat($this.data("dollar"));
                    var newPrice = currencyPrice * dollarPrice;
                    $this.html(newPrice.toString());
                });
            });
        </script>
    </body>
</html>

Автор: Another 29.9.2012, 23:28
Теперь точно решены все проблемы. Округление сделал, поправил нолики на конце, добавил определение валюты после числа а не в заголовке. В общем - получилось не хуже, чем в примере. Огромное вам Спасибо! smile

Автор: Another 9.10.2012, 03:33
Что бы не создавать новую тему - напишу тут.
Можно ли id="table" заменить на что-то иное? к этому ID привязывается другой скрипт и если на странице несколько таблиц, то во всех таблицах должен быть разный ID.
Можно ли заменить id="table" на data="table", например?
или, можно как-то в скрипте явно указать, что бы смотрело не id="table" а id="table[0-9]" ?

Автор: Aliance 9.10.2012, 14:09
Код

<... class="currency-table">

Код

$('.currency-table')

Автор: Another 9.10.2012, 16:07
Спасибо! Работает smile

Powered by Invision Power Board (http://www.invisionboard.com)
© Invision Power Services (http://www.invisionpower.com)