javascript - 获取在单击事件上创建的输入字段的值

Question

我正在处理类似这样的表格 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++
}

Answer 1

This

它有这个脚本(需要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 对评论的请求。