VPF::Стоимость товара по курсу - Форум программистов

Crushtest

Дата 2.11.2015, 19:54 (ссылка)

(нет голосов)

Загрузка ...

Новичок

Профиль
Группа: Участник
Сообщений: 1
Регистрация: 2.11.2015

Репутация: нет
Всего: нет

у меня есть тако код:

Код


<table>
<tr>
<td>1 единица</td>
<td>5грн</td>
<td>10руб</td>
<td>2 долл</td>
</tr>
</table>

<table>
<tr>
<td>груша</td>
<td>5грн</td>
<td>10руб</td>
<td>2 долл</td>
</tr>
<tr>
<td>груша</td>
<td>6грн</td>
<td>12руб</td>
<td>3долл</td>
</tr>
<tr>
<td>яблоко</td>
<td>7грн</td>
<td>14руб</td>
<td>4 долл</td>
</tr>
</table>

ну, я немного утрирую, но по сути мне нужен быстрый подсчет стоимости каждого товара - курс я буду вводить сам - в принципе даже не обязательно, чтобы вводился на странице, я его буду в коде прописывать всегда. и в зависимости от этого курса он писал мне стоимость. я в яваскрипте не мастак, как не бился, не мог допереть.
вот до чего дошел:
https://jsfiddle.net/pc0f8ry1/31/

Angel666

Дата 3.11.2015, 13:17 (ссылка)

(нет голосов)

Загрузка ...

Новичок

Профиль
Группа: Участник
Сообщений: 0
Регистрация: 8.9.2011

Репутация: нет
Всего: 1

Мое предложение такое:

Код


<!DOCTYPE html>
<html>
  <head>
    <title></title>
    <style>
      .col
      {
          float:left;
      }
      .plus, .minus
      {
          
          background-color:green;
          height:10px;
          width:10px;
          padding:5px;
          line-height:10px;
          display:block;
          text-align:center;
          float:left;
      }
      .minus
      {
        background-color:red;  
         
      }
      .plus
      {
           margin:0 50px 0 0px;
      }
    </style>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
    <script>
      $(document).ready(function(){
          $('.col').change(function(){ 
              if($(this).val()<0){alert("Нужно ведь вносить положительное число");}
              $('.result').val($('.price').val()*$(this).val()); 
          });
          $('.col').change(function(){ 
              $('.fingrn').val($('.grn').val()*$(this).val()); 
          });
          $('.col').change(function(){ 
              $('.finrub').val($('.rub').val()*$(this).val()); 
          });
          $('.col').change(function(){ 
              $('.finusd').val($('.usd').val()*$(this).val()); 
          });
          
          $(".minus").click(function(){
               $('.col').val($('.col').val()-1);      
               $('.col').change();
               recal();
          });
          $(".plus").click(function(){
               $('.col').val(parseInt($('.col').val())+1);      
               $('.col').change();
               recal();
          });
      });

      function recal(){
          var tmp;
          $('.basket tbody > tr > td').each(function (i){
               if($(this).attr('id') == 'g'){
                  tmp = Math.round($(this).html().split(' ')[0]) * $('.col').val() + ' руб'; 
               }
               if($(this).attr('id') == 'r'){
                  $(this).html(tmp);  
               }
           });                           
      }    
    </script>
  </head>
  <body>
      <a class="minus">-</a><input class="col" value="5"><a class="plus">+</a>
      <br><br>         
      <table class='basket'>
      <tr>
      <td id="name">груша1</td>
      <td id="g">5 грн</td>
      <td id="r">10 руб</td>
      <td id="d">2 долл</td>
      </tr>
      <tr>
      <td id="name">груша2</td>
      <td id="g">6 грн</td>
      <td id="r">12 руб</td>
      <td id="d">3 долл</td>
      </tr>
      <tr>
      <td id="name">яблоко1</td>
      <td id="g">7 грн</td>
      <td id="r">14 руб</td>
      <td id="d">4 долл</td>
      </tr>
      </table>
  </body>
</html>

Этот ответ добавлен с нового Винграда - http://vingrad.com

Angel666

Дата 3.11.2015, 14:06 (ссылка)

(нет голосов)

Загрузка ...

Новичок

Профиль
Группа: Участник
Сообщений: 0
Регистрация: 8.9.2011

Репутация: нет
Всего: 1

А если подправить таблицу

Код


      <table class='basket'>
         <tr>
         <td>1 единица</td>
         <td>5 грн</td>
         <td>10 руб</td>
         <td>2 долл</td>
         </tr>
         <tr>
         <td>груша</td>
         <td>5 грн</td>
         <td>10 руб</td>
         <td>2 долл</td>
         </tr>
         <tr>
         <td>груша</td>
         <td>6 грн</td>
         <td>12 руб</td>
         <td>3 долл</td>
         </tr>
         <tr>
         <td>яблоко</td>
         <td>7 грн</td>
         <td>14 руб</td>
         <td>4 долл</td>
         </tr>
      </table>

То можно так

Код


function recal(){
           $('.basket tbody > tr').each(function (i){
                $(this)[0].children[2].innerHTML = Math.round($(this)[0].children[1].innerHTML.split(' ')[0]) * $('.col').val() + ' руб'; 
           });                                  
      }

Этот ответ добавлен с нового Винграда - http://vingrad.com

Padonak

Дата 4.11.2015, 21:22 (ссылка)

(нет голосов)

Загрузка ...

Шустрый

Профиль
Группа: Участник
Сообщений: 63
Регистрация: 29.5.2008
Где: Ростов-на-Дону

Репутация: 2
Всего: 2

Насколько мне известно, атрибут id потому так и называется, что обязан быть уникальным для каждого элемента в пределах данного документа:

Цитата

   Definition and Usage

   The id attribute specifies a unique id for an HTML element (the value must be unique within the HTML document).

   The id attribute is most used to point to a style in a style sheet, and by JavaScript (via the HTML DOM) to manipulate the element with the specific id.

первоисточник тут

Этот ответ добавлен с нового Винграда - http://vingrad.com

Angel666

Дата 4.11.2015, 22:21 (ссылка)

(нет голосов)

Загрузка ...

Новичок

Профиль
Группа: Участник
Сообщений: 0
Регистрация: 8.9.2011

Репутация: нет
Всего: 1

Это пример, а не прямое руководство к действию.

Этот ответ добавлен с нового Винграда - http://vingrad.com

Padonak

Дата 5.11.2015, 14:22 (ссылка)

(нет голосов)

Загрузка ...

Шустрый

Профиль
Группа: Участник
Сообщений: 63
Регистрация: 29.5.2008
Где: Ростов-на-Дону

Репутация: 2
Всего: 2

пример чего? )

Этот ответ добавлен с нового Винграда - http://vingrad.com

Padonak

Дата 5.11.2015, 17:27 (ссылка)

(нет голосов)

Загрузка ...

Шустрый

Профиль
Группа: Участник
Сообщений: 63
Регистрация: 29.5.2008
Где: Ростов-на-Дону

Репутация: 2
Всего: 2

Решил тоже поучаствовать в подсчете груш:

Код


<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title>XYZ</title>
<style>
body{
text-align:center;
font-family:Verdana,Helvetica;
font-size:12px;
color:#000;
background-color:#fff;
}
td{
text-align:center;
border:1px solid #ccc;
border-radius:5px;
background-color:#f8f8ff;
}
.price{
margin-left:10px;
margin-right:10px;
}
input[type="range"]{
cursor:pointer;
}
</style>
<script src="../../jquery-latest.min.js"></script>
<script>
/* 
массив товаров - типа БД :) 
можно вынести в отдельный .js-файл
или получать из реальной БД
*/
    var db=[
    ['i-1','Груша',10,100,'кг'],
    ['i-2','Героин',100,10,'г'],
    ['i-3','Картофан',1,1000,'кг'],
    ['i-4','Шахид-мобиль',5000,2,'шт']
    ],
    Item=function(ID,name,price,qnt,unit){
    this.ID=ID;
    this.name=name;
/* цена всегда задается в долларах, другие валюты просто расчитываются */
    this.price=price;
    this.qnt=qnt;
    this.unit=unit;
    this.show=function(){
    var rub=this.price*20,/* курс к рублю */
        gr=this.price*10;/* курс к гривне */
    $('#maintab').append('<tr id="'+this.ID+'"><td>'+this.name+'</td></tr>');
    $('#'+this.ID).append('<td><span class="price rub" data-curr="'+rub+'" data-currname="руб">0</span>|<span class="price gr" data-curr="'+gr+'" data-currname="грн">0</span>|<span class="price dol" data-curr="'+price+'" data-currname="долл">0</span></td>')
    .append('<td class="unit">'+this.unit+'</td><td class="qnt" data-stored="'+this.qnt+'">0</td>')
    .append('<td><input class="inp" type="range" min="0" max="'+this.qnt+'" step="1" value="0" /></td>');
    }
    }
     
     $(document).ready(function(){
     for(var i=0; i < db.length; i++){
      var x = new Item(db[i][0],db[i][1],db[i][2],db[i][3],db[i][4]);
      x.show();
     }
     
    
     $('.inp').change(function(){
     var qnt=$(this).parent().parent().find('.qnt'),
         total=parseInt($(qnt).html()),
         newtotal=$(this).val();
         
         $(qnt).html(newtotal);
         
         $(this).parent().parent().find('.price').each(function(){
         var suff=(newtotal != 0)?(' '+$(this).attr('data-currname')):'';
         $(this).html(parseInt($(this).attr('data-curr'))*newtotal+suff);
         });
        });
        
        });
</script>
</head>
<body>
<center>
<table id="maintab" cellpadding="3" cellspacing="3" border="0" width="90%">
<tr>
<th>Наименование</th><th width="50%">Стоимость</th><th>Ед. изм.</th><th>Количество</th><th>Выбор</th>
</tr>
</table>
</center>
</body>
</html>

Этот ответ добавлен с нового Винграда - http://vingrad.com

0 Пользователей читают эту тему (0 Гостей и 0 Скрытых Пользователей)
0 Пользователей:
« Предыдущая тема \| JavaScript: для новичков \| Следующая тема »