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在评论中回答了OP请求。

Answer 2

<html>
<head>
<title> Dynamically create input fields- using jQuery </title>
<script  src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<script type="text/javascript">
$(function() {
        var addDiv = $('#addinput');
        var i = $('#addinput p').size() + 1;        
        $('#addNew').live('click', function() {
                $('<p><input type="text"  size="40" name="fname' + i +'" value="" placeholder="enter the first name" /> &nbsp; <input type="text" size="40" name="lname' + i +'" value="" placeholder="enter the last name" /> &nbsp; <input type="text"  size="20" name="age' + i +'" value="" placeholder="enter the age" /><input type="button"  id="remNew" value="Remove"> </p>').appendTo(addDiv);
                i++;                
                return false;
        });

        $('#remNew').live('click', function() { 
                if( i > 2 ) {
                        $(this).parents('p').remove();
                        //i--;
                }
                return false;
        });
});

</script>

</head>
<body>
<h2>Dynammically Add New Input Box</h2>
<div id="addinput">
    <p>
    <input type="button" id="addNew" value="Add New fields">

    </p>
</div>

</body>
</html>

获取在on-click事件上创建的输入字段的值

2 个答案: