我正在处理类似这样的表格 fiddle
它创建了我所需要的动态表单字段。
现在我需要当用户在 on-change 事件中填写这些字段中的数据时,我想检索字段以总结所有字段值。
或者
每次用户填写或更改这些字段的值时,我都需要根据这些字段值进行进一步计算。
var count = 0;
window.createinput = function(){
field_area = document.getElementById('fields')
var li = document.createElement("li");
var input = document.createElement("input");
input.id = 'field'+count;
input.name = 'field'+count;
input.size = "30";
input.type = "text"; //Type of field - can be any valid input type like text,file,checkbox etc.
li.appendChild(input);
var input2 = document.createElement("input");
input2.id = 'field2'+count;
input2.name = 'field2'+count;
input2.size = "10";
input2.type = "text"; //Type of field - can be any valid input type like text,file,checkbox etc.
li.appendChild(input2);
var input3 = document.createElement("input");
input3.id = 'field3'+count;
input3.name = 'field3'+count;
input3.size = "20";
input3.type = "text"; //Type of field - can be any valid input type like text,file,checkbox etc.
li.appendChild(input3);
field_area.appendChild(li);
//create the removal link
var removalLink = document.createElement('a');
removalLink.className = "remove";
removalLink.onclick = function(){
this.parentNode.parentNode.removeChild(this.parentNode)
}
var removalText = document.createTextNode('Remove Field Group');
removalLink.appendChild(removalText);
li.appendChild(removalLink);
count++
}
最佳答案
它有这个脚本(需要jquery):
$(document).ready(function () {
var counter = 0;
$("#addrow").on("click", function () {
counter = $('#myTable tr').length - 2;
var newRow = $("<tr>");
var cols = "";
cols += '<td><input type="text" name="name' + counter + '"/></td>';
cols += '<td><input type="text" name="price' + counter + '"/></td>';
cols += '<td><input type="button" class="ibtnDel" value="Delete"></td>';
newRow.append(cols);
$("table.order-list").append(newRow);
counter++;
});
$("table.order-list").on("change", 'input[name^="price"]', function (event) {
calculateRow($(this).closest("tr"));
calculateGrandTotal();
});
$("table.order-list").on("click", ".ibtnDel", function (event) {
$(this).closest("tr").remove();
calculateGrandTotal();
counter -= 1
});
});
function calculateRow(row) {
var price = +row.find('input[name^="price"]').val();
}
function calculateGrandTotal() {
var grandTotal = 0;
$("table.order-list").find('input[name^="price"]').each(function () {
grandTotal += +$(this).val();
});
$("#grandtotal").text(grandTotal.toFixed(2));
}
fiddle 会回答您的问题。它会添加和删除行。 (可以改成表格)
更新:
这Fiddle回答了 OP 对评论的请求。
关于javascript - 获取在单击事件上创建的输入字段的值,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/24277364/