总计动态创建的输入

Question

The following can add or remove a table using click events. 以下内容可以使用click事件添加或删除表。 In the top there is a table that is not dynamically created that I have an input field called name="total_hrs" that I would like to total all the hours entered into each of the inputs name="hours' + i + '" 在顶部，有一个不是动态创建的表，我有一个名为name =“ total_hrs”的输入字段，我希望将输入到每个输入中的所有小时数总计为name =“ hours'+ i +'”

The current function hrsUpdate only gives me the last inputs entered value. 当前函数hrsUpdate仅给我最后输入的输入值。 How can that function be modified to total all of the hours inputs and reduce in value if a table is removed? 如果删除了表格，如何修改该功能以总计所有小时数并减少其价值？

<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script>
var i = 1;

function addrow() {
    $('#mytable').before('<table><tr><td><input id="fname' + i + '" name="fname' + i + '" type="text" value=""></input></td><td><input id="lname' + i + '" name="lname' + i + '" type="text" value=""></input></td><td><input id="email' + i + '" name="email' + i + '" type="text" value=""></input></td><td><input id="hours' + i + '" name="hours' + i + '" type="text" value="" onchange="hrsUpdate(this.value)"></input></td><td><a class="remove" id="' + i + '" href="#">Remove</a></td></tr></table>');
    i++;
}

$(document).on('click', '.remove', function () {
    $(this).parents('table').remove();
});

function hrsUpdate(hrs) {
    var hours = hrs;
    alert(hours);
    document.getElementById('total_hrs').value = (hours);
}


</script>
<body>
<table>
    <tr>
        <td>
            <input type="text" value=""></input>
        </td>
        <td>
            <input type="text" value=""></input>
        </td>
        <td>
            <input type="text" value=""></input>
        </td>
        <td>
            <input id="total_hrs" name="total_hrs" type="text" value=""></input>
        </td>
    </tr>
</table>
<table id="mytable"></table>
        <a href="#" onclick="addrow()"><img src="http://www.clker.com/cliparts/2/f/6/1/11949856271997454136tasto_2_architetto_franc_01.svg.med.png" height="36" width="36" /></a>
</body>

edit: 编辑：

<script>
var i = 1;

function addrow() {
    $('#mytable').before('<table><tr><td><input id="fname' + i + '" name="fname' + i + '" type="text" value=""></input></td><td><input id="lname' + i + '" name="lname' + i + '" type="text" value=""></input></td><td><input id="email' + i + '" name="email' + i + '" type="text" value=""></input></td><td><input class = "hours" id="hours' + i + '" name="hours' + i + '" type="text" value="" onchange="hrsUpdate()"></input></td><td><a class="remove" id="' + i + '" href="#">Remove</a></td></tr></table>');
    i++;
}

$(document).on('click', '.remove', function () {
    $(this).parents('table').remove();
    hrsUpdate();
});


function hrsUpdate() {
    var total_hours = 0;
    $('.hours').each(function(i, elem) {
     total_hours += parseFloat($(elem).val());
  });
  document.getElementById('total_hrs').value = (total_hours);   
}

</script>

Answer 1

Your could consider trying the following structure: 您可以考虑尝试以下结构：

<span id="total_hours">0.00</span>
<table id="hour_records"></table>
<button id="add_row_btn">Add Row</button>

and generate table rows that look like the following: 并生成如下所示的表行：

<tr>
    <!-- You could also consider using a default value for the input -->
    <td><input type="text" value="" class="hours_entry"></td>
    <td><button class="remove_row_btn">Remove</button></td>
</tr>

JavaScript: JavaScript：

$(document).ready(function() {

    var handleAddRow = function(e) {
        var row = $('<tr></tr>');
        var input = $('<td></td').append('<input type="text" value="" class="hours_entry">');
            input.appendTo(row);
        var remove = $('<td></td').append('<button class="remove_row_btn">Remove</button>');
            remove.appendTo(row);
        row.appendTo('#hour_records');
    };

    var handleRemoveRow = function(e) {
        //Determine the respective row ('<tr>') object and remove it
        $(e.currentTarget).parent().parent().remove();
    };

    var updateTotalHours = function(e) {
        //Assuming that you properly validate all hour entries as numbers
        var total_hours = 0;
        $('.hours_entry').each(function(i, elem) {
            var hours = parseFloat($(elem).val());
            if(!isNaN(hours)) {
                   total_hours += parseFloat($(elem).val());
            }
        });
        $('#total_hours').text(total_hours);
    };

    //Setup the 'add row' event listener
    $('#add_row_btn').on('click', handleAddRow);
    //Setup the 'remove row' event listener
    $('#hour_records').on('click', 'button.remove_row_btn', handleRemoveRow);
    //Setup a listener to update the total hours count
    $('#hour_records').on('change', updateTotalHours);

});

Here is a jsFiddle demo that includes some very basic input validation: http://jsfiddle.net/F2hxH/10/ 这是一个jsFiddle演示，其中包含一些非常基本的输入验证： http : //jsfiddle.net/F2hxH/10/

总计动态创建的输入

问题描述

1 个解决方案

解决方案1
0 已采纳 2013-11-08 23:39:11

总计动态创建的输入

问题描述

1 个解决方案

解决方案1 0 已采纳 2013-11-08 23:39:11

解决方案1
0 已采纳 2013-11-08 23:39:11