PHP.SU

Программирование на PHP, MySQL и другие веб-технологии
PHP.SU Портал     На главную страницу форума Главная     Помощь Помощь     Поиск Поиск     Поиск Яндекс Поиск Яндекс     Вакансии  Пользователи Пользователи


 Страниц (1): [1]   

> Без описания
ЧИМ
Отправлено: 01 Августа, 2017 - 23:01:09
Post Id


Новичок


Покинул форум
Сообщений всего: 41
Дата рег-ции: Дек. 2016  


Помог: 0 раз(а)




Доброго времени суток!
Пытаюсь создать макет таблицы в которой будет неопределённое количество строк, но необходимо динамически вычислять сумму 2х input в строке и выводить её в третью. Как создать динамическое определение ID input в строке для дальнейшего манипулирования их значениями?
CODE (html):
скопировать код в буфер обмена
  1.  
  2. <body>
  3.         <table border="1">
  4.             <thead>
  5.                 <tr><th></th>
  6.                     <th>Цена</th>
  7.                     <th>Кол-во</th>
  8.                     <th>Сумма</th>
  9.                 </tr>
  10.             </thead>
  11.             <tbody>
  12.                 <tr>
  13.                     <td><input type="text" id="num" value="1"> </td>
  14.                     <td><input type="text" id="cena1"> </td>
  15.                     <td><input type="text" id="kol_vo1"> </td>
  16.                     <td><input type="text" id="sum1"> </td>
  17.                 </tr>
  18.                 <tr>
  19.                     <td><input type="text" id="num" value="2"></td>
  20.                     <td><input type="text" id="cena2"> </td>
  21.                     <td><input type="text" id="kol_vo2"></td>
  22.                     <td><input type="text" id="sum2"></td>
  23.                 </tr>
  24.             </tbody>
  25.         </table>
  26. <script>
  27.   ed1=document.getElementById("cena1");
  28.   ed2=document.getElementById("kol_vo1");
  29.   ed1.oninput = function()
  30.   {
  31.     document.getElementById('sum1').value = Number(ed1.value)*Number(ed2.value);
  32.   }
  33.   ed2.oninput = function()
  34.   {
  35.     document.getElementById('sum1').value = Number(ed1.value)*Number(ed2.value);
  36.   }
  37. </script>          
  38.     </body>
  39.  
 
 Top
Vladimir Kheifets
Отправлено: 02 Августа, 2017 - 09:01:21
Post Id



Частый гость


Покинул форум
Сообщений всего: 141
Дата рег-ции: Март 2017  
Откуда: Германия, Бавария


Помог: 3 раз(а)




ЧИМ пишет:
Доброго времени суток!
Пытаюсь создать макет таблицы в которой будет неопределённое количество строк, но необходимо динамически вычислять сумму 2х input в строке и выводить её в третью. Как создать динамическое определение ID input в строке для дальнейшего манипулирования их значениями?
Спойлер (Отобразить)


Доброе утро!

1. Советую Вам для выбора количества использовать select, вместо input.
для примера option от 1 до 3
2. HTML+JS:
CODE (html):
скопировать код в буфер обмена
  1. <html>
  2. <head>
  3. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  4. <script>  
  5.   function change_sum(i)
  6.   {  
  7.         cena_obj=document.getElementById("cena"+i);  
  8.         sum_obj=document.getElementById("sum"+i);
  9.         cena=Number(cena_obj.value)
  10.         kol_vo=Number(select_Value("kol_vo"+1));
  11.         if(cena>0 && kol_vo>0)
  12.                 sum_obj.value =cena*kol_vo;
  13.         else if(cena<=0 && kol_vo>0)
  14.                 alert("Error cena");
  15.         else if(cena>0 && kol_vo<=0)
  16.                 alert("Error kol_voe");
  17.         else if(cena>0 && kol_vo<=0)
  18.                 alert("Error cena kol_voe");
  19.  }
  20.  //---------------------------------------------
  21.  function select_Value(id)
  22.  {  
  23.         obj=document.getElementById(id);
  24.         ind = obj.selectedIndex;
  25.         return obj.options[ind].value;
  26.  }
  27. </script>          
  28. <title>change_sum</title>
  29. </head>
  30. <body>
  31.         <table border="1">
  32.             <thead>
  33.                 <tr><th></th>
  34.                     <th>Цена</th>
  35.                     <th>Кол-во</th>
  36.                     <th>Сумма</th>
  37.                 </tr>
  38.             </thead>
  39.             <tbody>
  40.                 <tr>
  41.                     <td><input type="text" id="num" value="1" > </td>
  42.                     <td><input type="text" id="cena1" onKeyUp="change_sum(1)"></td>
  43.                     <td>                    
  44.                     <select id="kol_vo1" onChange="change_sum(1)">
  45.                     <option>1</option>
  46.                     <option>2</option>
  47.                     <option>3</option>
  48.                     </select>                    
  49.                     </td>
  50.                     <td><input type="text" id="sum1"></td>
  51.                 </tr>
  52.                 <tr>
  53.                     <td><input type="text" id="num" value="2"></td>
  54.                     <td><input type="text" id="cena2" onKeyUp="change_sum(2)"> </td>
  55.                     <td>
  56.                     <select id="kol_vo2" onChange="change_sum(2)">
  57.                     <option>1</option>
  58.                     <option>2</option>
  59.                     <option>3</option>
  60.                     </select>          
  61.                     </td>
  62.                     <td><input type="text" id="sum2"></td>
  63.                 </tr>
  64.             </tbody>
  65.         </table>
  66. </body>

3. PHP+HTML+JS (пример для 10 строк):
Спойлер (Отобразить)
 
 Top
ЧИМ
Отправлено: 02 Августа, 2017 - 18:52:29
Post Id


Новичок


Покинул форум
Сообщений всего: 41
Дата рег-ции: Дек. 2016  


Помог: 0 раз(а)




select неудобен по той простой причине что количество может быть хоть и 50 и 1000. Кстати пример не совсем рабочий, так как не изменяется значение суммы от каждого изменения значения select.
На данный момент я уже додумался как сделать и конструкция уже работает, она выглядит вот так:
CODE (html):
скопировать код в буфер обмена
  1.  
  2. <html>
  3.     <head>
  4.         <title>exemple</title>
  5.         <meta charset="UTF-8">
  6.         <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     </head>
  8.     <body>
  9.         <table border="1">
  10.             <thead>
  11.                 <tr><th></th>
  12.                     <th>Цена</th>
  13.                     <th>Кол-во</th>
  14.                     <th>Сумма</th>
  15.                 </tr>
  16.             </thead>
  17.             <tbody>
  18.                 <tr>
  19.                     <td><input type="text" class="num" id="num1" value="1"> </td>
  20.                     <td><input type="text" class="cena" id="cena1" oninput="change(this)"></td>
  21.                     <td><input type="text" class="kol_vo" id="kol_vo1" oninput="change(this)"></td>
  22.                     <td><input type="text" class="sum" id="sum1" ></td>
  23.                 </tr>
  24.                 <tr>
  25.                     <td><input type="text" class="num" id="num2" value="2"></td>
  26.                     <td><input type="text" class="cena" id="cena2" oninput="change(this)"></td>
  27.                     <td><input type="text" class="kol_vo" id="kol_vo2" oninput="change(this)"></td>
  28.                     <td><input type="text" class="summa" id="sum2"></td>
  29.            
  30.                 </tr>
  31.             </tbody>
  32.         </table>
  33.          cena: <span id="ws1"></span><br>
  34.          kol_vo: <span id="ws2"></span><br>
  35.          summa: <span id="ws3"></span><br>
  36. <script>
  37.   function change(id)
  38.   {              
  39.         if (id.id.charAt(0)=='c')
  40.         {
  41.         cena=id.value;        
  42.         i_sum=id.id.charAt(4);        
  43.         new_kol_id=document.getElementById('kol_vo'+i_sum).value;        
  44.         document.getElementById('sum'+i_sum).value=Number(cena)*Number(new_kol_id);        
  45.         }
  46.       if (id.id.charAt(0)=='k')
  47.         {
  48.         kol_vo=id.value;        
  49.         i_sum=id.id.charAt(6);
  50.         new_cena_id=document.getElementById('cena'+i_sum).value;        
  51.         document.getElementById('sum'+i_sum).value=Number(new_cena_id)*Number(kol_vo);        
  52.         }    
  53.   }
  54. </script>          
  55.     </body>
  56. </html>
  57.  

(Отредактировано автором: 02 Августа, 2017 - 19:01:48)

 
 Top
Vladimir Kheifets
Отправлено: 03 Августа, 2017 - 09:45:08
Post Id



Частый гость


Покинул форум
Сообщений всего: 141
Дата рег-ции: Март 2017  
Откуда: Германия, Бавария


Помог: 3 раз(а)




ЧИМ пишет:
select неудобен по той простой причине что количество может быть хоть и 50 и 1000. Кстати пример не совсем рабочий, так как не изменяется значение суммы от каждого изменения значения select.
На данный момент я уже додумался как сделать и конструкция уже работает, она выглядит вот так:
Спойлер (Отобразить)


Доброе утро! Извините,у меня была ошибка в JS в 10 строке вместо i была1
Исправил
Спойлер (Отобразить)

Сделал с input(если не задана цена или количество сумма 0 не выдаётся):
В change_sum(par) - par: объект или число. Здесь вызов change_sum(this)
CODE (html):
скопировать код в буфер обмена
  1. <html>
  2. <head>
  3. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  4. <script>  
  5.   var sh=/\d+/;
  6.   function change_sum(par)
  7.   {        
  8.         i=(typeof(par)=="object")?par.id.match(sh):par;                
  9.         cena_obj=document.getElementById("cena"+i);  
  10.         sum_obj=document.getElementById("sum"+i);
  11.         kol_obj=document.getElementById("kol_vo"+i);
  12.         cena=Number(cena_obj.value)
  13.         kol_vo=Number(kol_obj.value);        
  14.         if(cena>0 && kol_vo>0)
  15.                sum_obj.value =cena*kol_vo;
  16.         /*
  17.                 else if(cena<=0 && kol_vo>0)
  18.                 alert("Error cena");
  19.         else if(cena>0 && kol_vo<=0)
  20.                alert("Error kol_voe");
  21.         else if(cena>0 && kol_vo<=0)
  22.                alert("Error cena kol_voe");
  23.                                
  24.                 */             
  25.  }
  26. </script>          
  27. <title>change_sum</title>
  28. </head>
  29. <body>
  30.         <table border="1">
  31.             <thead>
  32.                 <tr><th></th>
  33.                     <th>Цена</th>
  34.                     <th>Кол-во</th>
  35.                     <th>Сумма</th>
  36.                 </tr>
  37.             </thead>
  38.             <tbody>
  39.                 <tr>
  40.                     <td><input type="text" id="num" value="1" > </td>
  41.                     <td><input type="text" id="cena1" oninput="change_sum(this)"></td>
  42.                     <td><input type="text" id="kol_vo1" oninput="change_sum(this)"></td>
  43.                     <td><input type="text" id="sum1"></td>
  44.                 </tr>
  45.                 <tr>
  46.                     <td><input type="text" id="num" value="2"></td>
  47.                     <td><input type="text" id="cena2" oninput="change_sum(this)"> </td>
  48.                     <td><input type="text" id="kol_vo2" oninput="change_sum(this)"></td>                    
  49.                     <td><input type="text" id="sum2"></td>
  50.                 </tr>
  51.             </tbody>
  52.         </table>
  53. </body>
  54.  


Или так, вызов change_sum(1), change_sum(2) :
Спойлер (Отобразить)

(Отредактировано автором: 03 Августа, 2017 - 19:46:09)

 
 Top
ЧИМ
Отправлено: 08 Августа, 2017 - 18:01:37
Post Id


Новичок


Покинул форум
Сообщений всего: 41
Дата рег-ции: Дек. 2016  


Помог: 0 раз(а)




Благодарю за помощь!
 
 Top
Страниц (1): [1]
Сейчас эту тему просматривают: 1 (гостей: 1, зарегистрированных: 0)
« JavaScript & VBScript »


Все гости форума могут просматривать этот раздел.
Только зарегистрированные пользователи могут создавать новые темы в этом разделе.
Только зарегистрированные пользователи могут отвечать на сообщения в этом разделе.
 



Powered by PHP  Powered By MySQL  Powered by Nginx  Valid CSS  RSS

 
Powered by ExBB FM 1.0 RC1. InvisionExBB