Табличный калькулятор габаритов груза

Question

Есть такой калькулятор: (ниже код)

Он работает, но только для одного продукта (для одной строки). Как добавить к нему строки с другими характеристиками, что бы они так же пересчитывались как в имеющимся калькуляторе?

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
table.teh_har {
    text-align: center;}
</style>
</head>
<body>
<table class="teh_har" >
<tr>
   <td rowspan="2">МОДЕЛЬ ОБОРУДОВАНИЯ</td>
   <td colspan="3">ГАБАРИТЫ КОРОБА, СМ</td>
   <td rowspan="2">ОБЪЕМ ГРУЗА, М³</td>
   <td colspan="2">ВЕС, КГ</td>
   <td>ВВЕДИТЕ КОЛ-ВО</td>
    <td>ОБЩИЙ ВЕС MAX, КГ</td>
    <td>ОБЩИЙ ОБЪЕМ ГРУЗА, М³</td>
 </tr>
    <tr>
   <td>ДЛИНА</td>
    <td>ШИРИНА</td>
    <td>ВЫСОТА</td>
    <td>MIN</td>
  <td>MAX</td> 
 </tr>
 <tr id="info">
   <td>MORION</td>
   <td>43</td>
    <td>32</td>
    <td>30</td>
    <td>0,04</td>
     <td>11,5</td>
     <td>12,6</td>
     <td><input id="colvo" onkeyup="summ(), summ1()"></td>
  <td><div id="result"></div></td> 
     <td><div id="result1"></div></td>
 </tr>
</table>
    
    <script>
    var ves = 12.6;//ОБЩИЙ ВЕС MAX, КГ 
    function summ() {
      var kolvo = parseInt(document.getElementById("colvo").value);
        var all = ves * kolvo;
      document.getElementById("result").innerHTML = all;
      } 
    </script>
    <script>
    var obem = 0.04;//ОБЩИЙ ВЕС MAX, КГ 
    function summ1() {
      var kolvo = parseInt(document.getElementById("colvo").value);
        var all = obem * kolvo;
      document.getElementById("result1").innerHTML = all;
      } 
    </script>
    
</body>
</html>

Answer 1

Я переписал ваш код для переиспользования. Итак, для того, чтобы добавить новые строки для подсчета делаем так:

Добавляем новую строку с данными: Копируете прошлую, меняете данные на новые. Пример строки:

<tr id="morion">
    <td>MORION</td>
    <td>43</td>
    <td>32</td>
    <td>30</td>
    <td>0,04</td>
    <td>11,5</td>
    <td>12,6</td>
    <td>
      <input id="count1">
    </td>
    <td>
      <div id="result"></div>
    </td> 
    <td>
      <div id="result1"></div>
    </td>
  </tr>

Здесь вам нужно поменять или убрать id тега tr. Меняем и запоминаем id поля ввода count1, а также вывода результатов result + result1

Далее в коде js вам нужно достать input и добавить ему слушатель keyup с выполнением функции calculateAndShowResult. Подробнее описал в коде. Просто копируете прошлый кусок кода аналогично как и со строкой и подставляете туда нужные данные: стартовые значения, id элементов.

const calculateTotalWeightAndVolume = (count, weight, volume) => {
  // count - количество, weight - вес, volume - объем
  // возвращает [общийВес, общийОбъём]
  return [weight * count, volume * count]
}

const calculateAndShowResult = (elementIdToOutputWeight, elementIdToOutputVolume, { count, weight, volume }) => {
    const [totalWeight, totalVolume] = calculateTotalWeightAndVolume(count, weight, volume)
  const outputWeightEl = document.getElementById(elementIdToOutputWeight)
  const outputVolumeEl = document.getElementById(elementIdToOutputVolume)
  
  outputWeightEl.textContent = totalWeight
  outputVolumeEl.textContent = totalVolume
}


// логика для подсчета первой строки. 
// чтобы добавить подсчет новой строки, вместо count1 вставьте id инпута нужной вам строки
// также не забудьте поменять имя переменной firstInput
const firstInput = document.getElementById('count1')
firstInput.addEventListener('keyup', (ev) => {
    const count = parseInt(ev.target.value)
  
  // функция подсчета и вывода результата. 
  // Вместо result пропишите id элемента вывода общего веса
  // Вместо result1 пропишите id элемента вывода общего объема
  // задайте вес и объем для рассчета в полях weight и volume
  calculateAndShowResult('result', 'result1', { count: count, weight: 12.6, volume: 0.04 })
})

// пример
const morionTwo = document.getElementById('morion2-count')
morionTwo.addEventListener('keyup', (ev) => {
    const count = parseInt(ev.target.value)
  
  calculateAndShowResult('morion2-weight', 'morion2-volume', { count: count, weight: 1000, volume: 2000 })
})

table.teh_har {
  text-align: center;
}

td {
  padding: 0;
}

thead td {
  border-bottom: 1px solid rgba(0, 0, 0, .5);
}

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>Untitled Document</title>
</head>
<body>
<table class="teh_har" >
  <thead>
    <tr>
      <td rowspan="2">МОДЕЛЬ ОБОРУДОВАНИЯ</td>
      <td colspan="3">ГАБАРИТЫ КОРОБА, СМ</td>
      <td rowspan="2">ОБЪЕМ ГРУЗА, М³</td>
      <td colspan="2">ВЕС, КГ</td>
      <td>ВВЕДИТЕ КОЛ-ВО</td>
      <td>ОБЩИЙ ВЕС MAX, КГ</td>
      <td>ОБЩИЙ ОБЪЕМ ГРУЗА, М³</td>
    </tr>
  </thead>
  <tbody>
  <tr>
    <td>ДЛИНА</td>
    <td>ШИРИНА</td>
    <td>ВЫСОТА</td>
    <td>MIN</td>
    <td>MAX</td> 
  </tr>
  <tr id="morion">
    <td>MORION</td>
    <td>43</td>
    <td>32</td>
    <td>30</td>
    <td>0,04</td>
    <td>11,5</td>
    <td>12,6</td>
    <td>
      <input id="count1">
    </td>
    <td>
      <div id="result"></div>
    </td> 
    <td>
      <div id="result1"></div>
    </td>
  </tr>
  
  // пример добавления строки
  <tr id="morion2">
    <td>MORION2</td>
    <td>43</td>
    <td>32</td>
    <td>30</td>
    <td>1000</td>
    <td>11,5</td>
    <td>2000</td>
    <td>
      <input id="morion2-count">
    </td>
    <td>
      <div id="morion2-weight"></div>
    </td> 
    <td>
      <div id="morion2-volume"></div>
    </td>
  </tr>
  </tbody>
</table>
</body>
</html>

БЛОГ НА HUSL

Табличный калькулятор габаритов груза

Ответы (1 шт):