O
I rewrite your reuse code. So, to add new lines for counting, we're doing this:Add a new line with data: Cop past, change data to new ones. Example of line:<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>
Here you need to change or remove the id flow. tr♪ Modify and resemble field of entry count1and findings result + result1Next in js, you need to get input and add a listener to him keyup performance calculateAndShowResult♪ Details on the code. You're just copying the last piece of the code as well as the row, and you're putting the necessary data in it: start-up values, id elements.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>
