Помогите вывести сумму инпутов
|
var d = document;
var last_id = 1;
function add_value_f() {
// находим нужную таблицу
var tbody = d.getElementById('v_table').getElementsByTagName('tbody')[0];
// создаем строку таблицы и добавляем ее
var row = d.createElement("tr");
tbody.appendChild(row);
// создаем ячейки в вышесозданной строке
var td1 = d.createElement("td");
var td2 = d.createElement("td");
row.appendChild(td1);
row.appendChild(td2);
last_id = last_id + 1;
// добавляем формы ввода в ячейки
td1.innerHTML = +last_id+'';
td2.innerHTML = '<input type="text" name="nep_'+last_id+'" id="nep_'+last_id+'">';
}
<table id="v_table">
<tbody>
<tr>
<td>1</td><td><input type="text" name="nep_1" id="nep_1"></td>
</tr>
</tbody>
<tfoot>
<tr><td colspan="2"><center><button onclick="add_value_f()">+</button></center></td></tr>
<tr><td colspan="2"><center><input type="text" name="sum" id="sum"></td></tr>
</tfoot>
</table>
|
birt,
<!DOCTYPE html>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
</head>
<body>
<table id="v_table">
<tbody>
<tr>
<td>1</td><td><input type="text" name="nep_1" id="nep_1"></td>
</tr>
</tbody>
<tfoot>
<tr><td colspan="2"><center><button onclick="add_value_f()">+</button></center></td></tr>
<tr><td colspan="2"><center><input type="text" name="sum" id="sum"></td></tr>
</tfoot>
</table>
<script>
var d = document;
var last_id = 1;
function add_value_f() {
var tbody = d.getElementById("v_table").getElementsByTagName("tbody")[0];
var row = d.createElement("tr");
tbody.appendChild(row);
var td1 = d.createElement("td");
var td2 = d.createElement("td");
row.appendChild(td1);
row.appendChild(td2);
last_id = last_id + 1;
td1.innerHTML = +last_id + "";
td2.innerHTML = '<input type="text" name="nep_' + last_id + '" id="nep_' + last_id + '">'
}
var table = d.getElementById("v_table"),
sum = d.getElementById("sum");
table.addEventListener("input", function() {
sum.value = [].reduce.call(table.querySelectorAll('[name^="nep_"]'), function(summ, item) {
return summ += +item.value || 0
}, 0)
});
</script>
</body>
</html>
|
рони,
Спасибо, а можно еще поставить (Минус) напротив каждого инпут, и чтобы можно было удалить инпут |
|
рони,
посмотрел, для меня это сложно |
birt, смотрите весь код внимательно!
<!DOCTYPE html>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
body {
counter-reset: list;
}
#v_table tbody tr td:nth-child(1):before{
position: absolute;
display: block;
margin-top: -12px;
counter-increment: list;
content: counter(list);
color: #000000;
}
#v_table tbody tr td:nth-child(1){
width: 20px;
}
#v_table span{
margin-left: 15px;
text-align: center;
font-size: 28px;
cursor: pointer;
}
</style>
</head>
<body>
<table id="v_table">
<tbody>
<tr>
<td></td><td><input type="text" class="nep"></td>
</tr>
</tbody>
<tfoot>
<tr><td colspan="2"><center><button onclick="add_value_f()">+</button></center></td></tr>
<tr><td colspan="2"><center><input type="text" name="sum" id="sum"></td></tr>
</tfoot>
</table>
<script>
var d = document;
function add_value_f() {
var tbody = d.getElementById("v_table").getElementsByTagName("tbody")[0];
var row = d.createElement("tr");
tbody.appendChild(row);
var td1 = d.createElement("td");
var td2 = d.createElement("td");
row.appendChild(td1);
row.appendChild(td2);
td2.innerHTML = '<input type="text" class="nep">'
var span = d.createElement("span");
span.innerHTML='-';
span.addEventListener("click", function() {tbody.removeChild(row)})
td2.appendChild(span)
}
var table = d.getElementById("v_table"),
sum = d.getElementById("sum");
table.addEventListener("input", function() {
sum.value = [].reduce.call(table.querySelectorAll('.nep'), function(summ, item) {
return summ += +item.value || 0
}, 0)
});
</script>
</body>
</html>
|
| Часовой пояс GMT +3, время: 08:42. |