<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title> ДОСТАВКА</title>
<script type="text/javascript">
window.addEventListener("DOMContentLoaded", function() {
function c() {
var d = a.reduce(function(b, a, i) {
return i ? b + a : 0
}, 0);
a.forEach(function(k, c) {
if(!c||!d) return;
var koef = document.querySelectorAll("[name='disc']")[1].checked ? 1.18 : 1
// var itog = document.querySelectorAll("[name='disc']")[1].checked ? 1 : 1.18
var e = 100 * k / d,
h = (a[0] * e / 100 + k)/koef,
// itogi = (a[0] * e / 100 + k)*itog,
g = f[c].cells;
g[2].innerHTML = e.toFixed(0) + "%";
g[3].innerHTML = h.toFixed(4)
//g[4].innerHTML = itogi.toFixed(2)
})
}
var f = document.querySelectorAll("tbody tr"),
a = [];
[].forEach.call(f, function(d, b) {
a[b] = 0;
d.querySelector("input").addEventListener("input", function() {
a[b] = +this.value.replace(",", ".") || 0;
c()
})
})
var disc = document.querySelectorAll("[name='disc']");
[].forEach.call(disc, function(el) {
el.addEventListener("click", c)
})
});
function addRow(id){
var tbody = document.getElementById(id).getElementsByTagName("TBODY")[0];
var row = document.createElement("TR")
var td1 = document.createElement("TD")
td1.appendChild(document.createTextNode("Цена ="))
var td2 = document.createElement("TD")
var td3 = document.createElement("TD")
var td4 = document.createElement("TD")
row.appendChild(td1);
row.appendChild(td2);
row.appendChild(td3);
row.appendChild(td4);
tbody.appendChild(row);
}
</script>
</head>
<body>
Распределение доставки по позициям <br>
<table summary="" border="1" bordercolor="red" style="color:red;font-size:20px;" id="myTable" cellspacing="0">
<thead>
<tr>
<th>ЦЕНЫ<br> <input type="radio" name="disc" checked value="1" >Без НДС
<input type="radio" name="disc" value="1.18" >С НДС</th>
<th>ВВОДИМ ЦЕНУ</th>
<th>%</th>
<th>Результат без НДС</th>
</tr>
</thead>
<tbody>
<tr>
<td width="250">Укажите стоимость доставки</td>
<td><input type="text" style="color:red;font-size:20px;" placeholder="ДОСТАВКА" size="15" maxlength="15"></td>
<td align="center" width="50"></td>
<td align="left" width="100"></td>
</tr>
<tr>
<td align="right">Цена =</td>
<td><input type="text" style="color:red;font-size:20px;" placeholder="ВВОДИМ ЦЕНУ" size="15" maxlength="15"> </td>
<td></td>
<td></td>
</tr>
</tbody>
</table>
<input type="button" value="Добавить строку" href="javascript://" onclick="addRow('myTable');return false;">
</body>
</html>
Получилось так.