Как вставить формулу в таблицу?

Question

[Laa_vender]

Привет.

Я только учусь и очень нужна помощь.
Цель 1: Создание динамической формы. Нажимая на кнопку "add" должна добавляться строка с инпутами для заполнения (с помощью jquery)
Цель 2: При вводе чисел во 2, 3, 4 ячейках, в ячейках 5 и 6 должны быть следующие формулы:
Ячейка 5 = 4 / 3
Ячейка 6 = 5 * 2 (но! если, допустим, в ячейке 2 число 10, то умножать должны на 0.1 )
Собственно, таблица:

<div class="table">
		<div class="tr">
			<div class="td">1</div>
			<div class="td">2</div>
			<div class="td">3</div>
			<div class="td">4</div>
			<div class="td">5</div>
			<div class="td">6</div>
		</div>
		<div class="tr">
			<div class="td">a</div>
			<div class="td">90</div>
			<div class="td">60</div>
			<div class="td">44</div>
			<div class="td">=73,34 (A4/A3)</div> 
			<div class="td">=66,01 (73,34*0,9(0,9=a2))</div>
		</div>
		<div class="tr">
			<div class="td">b</div>
			<div class="td">15</div>
			<div class="td">7</div>
			<div class="td">6</div>
			<div class="td">85,72 </div>
			<div class="td"></div>
		</div>
		<div class="tr">
			<div class="td">c</div>
			<div class="td">5</div>
			<div class="td">8</div>
			<div class="td">9</div>
			<div class="td"></div>
			<div class="td"></div>
		</div>
		<div id="add" class="tr">
			<div class="td"><input type="text" class="inp1"></div>
			<div class="td"><input type="text" class="inp2"></div>
			<div class="td"><input type="text" class="inp3"></div>
			<div class="td"><input type="text" class="inp4"></div>
			<div class="td"></div>
			<div class="td"></div>
		</div>
		<div class="tr">
			<div class="td"><button onclick="test();"> add </button></div>
			<div class="td">110</div>
			<div class="td">159,04</div>
			<div class="td"></div>
			<div class="td"></div>
			<div class="td"></div>
		</div>
</div>

Немного CSS для красоты:

<style>
	*{
		box-sizing: border-box;
	}
	.table{
		display: table;
		width: 100%;
		border-collapse: collapse;
	}
	.tr{
		display: table-row;
	}
	.td{
		display: table-cell;
		text-align: center;
		border: none;
		border: 1px solid #ccc;
		vertical-align: middle;
		width:60px;
		max-width:130px;
		height:45px;
		padding: 4px;
	}

	input{
		border: none;
		border: 1px solid #ccc;
		vertical-align: middle;
		width:60px;
		max-width:130px;
		height:30px;
	}
  </style>

Comments

[alexalexes]

Вы хотите вычислять результат в ячейках с жестко заданной формулой программистом, или хотите позволить пользователю самому заполнять формулы?
Реализация первого случая - тривиальная.
Второй случай (аля-Excel) потребует от вас погружения в теорию конечных автоматов.
Вам придется создать автомат, который производит калькуляцию выражения, записанного строкой.

[Laa_vender]

alexalexes, Необходим результат с уже заданной формулой.
Пользователь сможет только заводить данные, а формула сама будет вычислять результат. Зависла на этом этапе очень...

[alexalexes]

Еще вопросы: зачем вам div-ы с table-стилями, когда есть теги, которые строят таблицу сразу: table, tr, td ?

[Laa_vender]

alexalexes,
Тут глупо-девчачья сторона.
Таблица из div'ов мне больше симпатизирует.

Answer 1

[alexalexes]

Вот, собственно, решение:

<input type="button" onclick="calc_table_add_row()" value="Добавить"/>
<div id="calc_table" class="table"></div>
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<script>
      // функция для добавления вычисляемой строки
      function calc_table_add_row()
      {
        //Элементы input подписаны на события onkeypress и onblur, что позволяет делать пересчет как при непосредственном изменении значения, так и во время потери фокуса
        $('#calc_table').append(
        '<div class="tr">\
           <div class="td">' + ($('#calc_table>div.tr').length + 1 /* это нумератор строки, добавляется номер от существующего кол-ва строк */) + '</div>\
           <div class="td">\
             <input type="text" onkeypress="calc_table_recalc_row(event)" onblur="calc_table_recalc_row(event)"/></div>\
           <div class="td"><input type="text" onkeypress="calc_table_recalc_row(event)" onblur="calc_table_recalc_row(event)"/></div>\
           <div class="td"><input type="text" onkeypress="calc_table_recalc_row(event)" onblur="calc_table_recalc_row(event)"/></div>\
           <div class="td"></div>\
           <div class="td"></div>\
         </div>'
        ); 
      }
      // функция-обработчик пересчета значений в строке
      function calc_table_recalc_row(e)
      {
        var cur_input = e.target; // на этом элементе произошло событие (input)
        var cur_td = cur_input.parentNode; // получаем родительский элемент (div.td, в котором нажодится затронутый input)
        var cur_tr = cur_td.parentNode; // получаем родительский элемент (div.tr, в котором нажодится div.td с затронутым input)
        var td_divs = $(cur_tr).find('div.td'); // находим все элементы div.td на данной строке
        try // если возникнет какая-то ошибка, то тихо прекратим вычисления
        {
          var input1 = parseFloat($(td_divs[1]).find('input')[0].value); // получаем значение ячейки 2
          var input2 = parseFloat($(td_divs[2]).find('input')[0].value); // получаем значение ячейки 3
          var input3 = parseFloat($(td_divs[3]).find('input')[0].value); // получаем значение ячейки 4
          if(!isNaN(input1) && !isNaN(input2) && !isNaN(input3)) // все ли значения получились числами вещественными ?
          {
            var result4 = input3 / input2; // считаем результат для ячейки 5
            $(td_divs[4]).html( (result4).toFixed(2) ); // записываем результат в ячейку 5 с округлением до 2 знаков
            $(td_divs[5]).html( (result4 * (input1.toFixed(2) == 10.00 ? 0.1 : 5)).toFixed(2) ); // считаем и записываем результат в ячейку 6 с округлением до 2 знаков
          }
        }
        catch(ex)
        {
        }
      }
</script>