var a = document.querySelector('#shirina'),
b = document.querySelector('#dlinna'),
c = document.querySelector('#vysota'),
a1 = document.querySelector('#cloned_dveri'),
b1 = document.querySelector('#shirina_dveri_1'),
c1 = document.querySelector('#vysota_dveri_1'),
a2 = document.querySelector('#cloned_okna'),
b2 = document.querySelector('#shirina_okna_1'),
c2 = document.querySelector('#vysota_okna_1'),
a3 = document.querySelector('#glubina'),
b3 = document.querySelector('#vysota_otkosa'),
perimetr = document.querySelector('#perimetr'),
obiem = document.querySelector('#obiem'),
ploschad = document.querySelector('#ploschad');
$('#a1').data('counter', 1).click(function() {
var counter = $(this).data('counter');
$(this).data('counter', counter + 1);
a1.value = ($(this).data('counter'));
$('<input type="text" size="10" class="numb">').attr({
name: 'b1_' + (a1.value),
id: 'shirina_dveri_' + (a1.value)
}).insertBefore($('#shirina_dveri_1'));
$('<input type="text" size="10" class="numb">').attr({
name: 'c1_' + (a1.value),
id: 'vysota_dveri_' + (a1.value)
}).insertBefore($('#vysota_dveri_1'));
$('.numb').on('change', function() {
console.log(this.value); // this или e.target – указание на элемент, на котором произошло событие
});
});
$('#a2').data('counter', 1).click(function() {
var counter = $(this).data('counter');
$(this).data('counter', counter + 1);
a2.value = ($(this).data('counter'));
$('<input type="text" size="10" class="numb">').attr({
name: 'b2_' + (a1.value),
id: 'shirina_okna_' + (a2.value)
}).insertBefore($('#shirina_okna_1'));
$('<input type="text" size="10" class="numb">').attr({
id: 'vysota_okna_' + (a2.value),
name: 'c2_' + (a1.value)
}).insertBefore($('#vysota_okna_1'));
$('.numb').on('change', function() {
console.log(this.value); // this или e.target – указание на элемент, на котором произошло событие
});
});
$('.numb').on('change', function() {
console.log(this.value); // this или e.target – указание на элемент, на котором произошло событие
});
$('#btn').click(function() {
if (a1.value != 0) {
perimetr.value = 2 * (parseInt(a.value) + parseInt(b.value)) - (b1.value * a1.value);
} else {
perimetr.value = 2 * (parseInt(a.value) + parseInt(b.value));
}
ploschad.value = (a.value * b.value);
obiem.value = Math.round((perimetr.value * c.value) - (b1.value * c1.value) + (b2.value * c2.value));
});
html,
body {
background: #F2F3F4;
-webkit-app-region: drag;
user-select: none;
}
.btn {
margin: 2%;
display: inline-block;
font-family: Monotype Corsiva;
font-size: 15px;
font-weight: bold;
color: rgb(68, 68, 68);
text-decoration: none;
padding: .2em 1.2em;
outline: none;
border: 1px solid rgba(0, 0, 0, .1);
border-radius: 2px;
background: #F2F3F4 linear-gradient(#f4f4f4, #f1f1f1);
transition: all .218s ease 0s;
}
.btn:hover {
color: rgb(24, 24, 24);
border: 1px solid rgb(198, 198, 198);
background: #f7f7f7 linear-gradient(#f7f7f7, #f1f1f1);
box-shadow: 0 1px 2px rgba(0, 0, 0, .1);
}
.btn:active {
color: rgb(51, 51, 51);
border: 1px solid rgb(204, 204, 204);
background: rgb(238, 238, 238) linear-gradient(rgb(238, 238, 238), rgb(224, 224, 224));
box-shadow: 0 1px 2px rgba(0, 0, 0, .1) inset;
}
.clone {
margin-right: 1%;
outline: none;
text-decoration: none;
padding: .2em 1.2em;
font-weight: bold;
font-family: Monotype Corsiva;
border-radius: 2px;
color: rgb(68, 68, 68);
border: 1px solid rgba(0, 0, 0, .1);
background: #F2F3F4 linear-gradient(#f4f4f4, #f1f1f1);
}
.clone:hover {
color: rgb(24, 24, 24);
border: 1px solid rgb(198, 198, 198);
background: #f7f7f7 linear-gradient(#f7f7f7, #f1f1f1);
box-shadow: 0 1px 2px rgba(0, 0, 0, .1);
}
.clone:active {
color: rgb(51, 51, 51);
border: 1px solid rgb(204, 204, 204);
background: rgb(238, 238, 238) linear-gradient(rgb(238, 238, 238), rgb(224, 224, 224));
box-shadow: 0 1px 2px rgba(0, 0, 0, .1) inset;
}
.brd {
background: #F2F3F4; /* Цвет фона веб-страницы */
border-collapse: collapse; /* Убираем двойные линии между ячейками */
border: 3px solid #F2F3F4; /* рамка вокруг таблицы */
}
.td {
border: 1px solid rgb(80, 80, 80); /* Параметры рамки */
}
.tr {
border: 1px solid rgb(80, 80, 80); /* Параметры рамки */
}
.numb {
border: 5px solid #F2F3F4; /* Параметры рамки */
text-align: center; /* расположение текста */
outline: none;
}
.raschet {
border: 5px solid #F2F3F4; /* Параметры рамки */
text-align: center; /* расположение текста */
}
.title {
background: #C0C0C0; /* Цвет фона веб-страницы */
font-family: Monotype Corsiva;
font-size: 15px;
}
.text {
font-family: Monotype Corsiva;
font-size: 13px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<center>
<table width="400" border="1" class="brd">
<thead>
<tr>
<th class="title" colspan="3">Параметры помещения</th>
</tr>
<tr>
<th class="text">ширина</th>
<th class="text">длинна</th>
<th class="text">высота</th>
</tr>
</thead>
<tbody>
<tr align="center">
<td><input type="text" size="10" class="numb" id="shirina"></td>
<td><input type="text" size="10" class="numb" id="dlinna"></td>
<td><input type="text" size="10" class="numb" id="vysota"></td>
</tr>
</tbody>
<thead>
<tr>
<th class="title" colspan="3">Двери</th>
</tr>
<tr>
<th class="text">количество</th>
<th class="text">ширина</th>
<th class="text">высота</th>
</tr>
</thead>
<tbody>
<tr align="center">
<td>
<table>
<button type="button" class="clone" id="a1">Добавить</button>
<input type="text" size="5" class="numb" id="cloned_dveri" readonly></table>
</td>
<td><input type="text" size="10" class="numb" name="b1" id="shirina_dveri_1" save()></td>
<td><input type="text" size="10" class="numb" name="c1" id="vysota_dveri_1"></td>
</tr>
</tbody>
<thead>
<tr>
<th class="title" colspan="3">Окна</th>
</tr>
<tr align="center">
<th class="text">количество</th>
<th class="text">ширина</th>
<th class="text">высота</th>
</tr>
</thead>
<tbody>
<tr align="center">
<td>
<table>
<button type="button" class="clone" id="a2">Добавить</button>
<input type="text" size="5" class="numb" id="cloned_okna" readonly></table>
</td>
<td><input type="text" size="10" class="numb" name="b2" id="shirina_okna_1"></td>
<td><input type="text" size="10" class="numb" name="c2" id="vysota_okna_1"></td>
</tr>
</tbody>
<thead>
<tr>
<th class="title" width="130" rowspan="1">Откосы</th>
<th class="text">глубина</th>
<th class="text">высота</th>
</tr>
</thead>
<tbody>
<tr align="center">
<td colspan="1"></td>
<td><input type="text" size="10" class="numb" id="glubina"></td>
<td><input type="text" size="10" class="numb" id="vysota_otkosa"></td>
</tr>
</tbody>
</table>
<div align="center" colspan="3">
<button type="button" class="btn" id="btn">Произвести расчёт</button></div>
<table width="400" border="2" class="brd">
<thead>
<tr>
<th class="title" width="130">Периметр</th>
<th class="title" width="130">Площадь стен</th>
<th class="title" width="130">Площадь по полу</th>
</tr>
</thead>
<tfoot>
<tr align="center">
<td>=<input type="text" size="7" class="raschet" id="perimetr" readonly>м2</td>
<td>=<input type="text" size="7" class="raschet" id="obiem" readonly>м2</td>
<td>=<input type="text" size="7" class="raschet" id="ploschad" readonly>м2</td>
</tr>
</tfoot>
</table>
</center>