Javascript 合计动态创建的输入_Javascript_Jquery

Javascript 合计动态创建的输入

javascript jquery

Javascript 合计动态创建的输入,javascript,jquery,Javascript,Jquery,以下内容可以使用单击事件添加或删除表。在顶部有一个不是动态创建的表，我有一个名为name=“total_hrs”的输入字段，我希望将输入到每个输入name=“hours'+I+'中的所有小时合计当前函数hrsUpdate仅提供上次输入的值。如果删除了一个表，如何修改该函数以合计所有小时输入并减少值 <script src="http://code.jquery.com/jquery-1.9.1.js"></script> <script> var i = 1

以下内容可以使用单击事件添加或删除表。在顶部有一个不是动态创建的表，我有一个名为name=“total_hrs”的输入字段，我希望将输入到每个输入name=“hours'+I+'中的所有小时合计

当前函数hrsUpdate仅提供上次输入的值。如果删除了一个表，如何修改该函数以合计所有小时输入并减少值

<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>


var i=1；
函数addrow（）{
$（'#mytable'）。在（''）之前；
i++；
}
$（文档）.on（'单击'，'.remove'，函数（）{
$（this.parents（'table'）.remove（）；
});
功能hrsUpdate（小时）{
var小时=小时；
警报（小时）；
document.getElementById（'total_hrs'）。值=（小时）；
}

编辑：


var i=1；
函数addrow（）{
$（'#mytable'）。在（''）之前；
i++；
}
$（文档）.on（'单击'，'.remove'，函数（）{
$（this.parents（'table'）.remove（）；
hrsUpdate（）；
});
函数hrsUpdate（）{
var总时数=0；
$（'.hours'）。每个（函数（i，元素）{
总时数+=parseFloat（$（elem.val（））；
});
document.getElementById（'total_hors'）。value=（total_hours）；
}
<代码> > p>您可以考虑尝试以下结构：
<span id="total_hours">0.00</span>
<table id="hour_records"></table>
<button id="add_row_btn">Add Row</button>

0.00
添加行

并生成如下所示的表行：
<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:
$(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);

});

$（文档）.ready（函数（）{
var handleAddRow=函数（e）{
变量行=$（''）；
var input=$（“您的意思是用户可以使用单击事件添加或删除一行吗？您的描述将表明他们正在添加一个全新的表。是否有理由使用多个表，而不是一个包含多行的表（用于输入小时）？我感谢您的回复。是的，用户将能够添加或删除一个表。该项目处于早期阶段。每个表最终将包含25个左右的元素，每个元素由mysql驱动。项目背后的概念是每个表将用于承包商投标表格的单个项目。当他们选择一个项目进行下拉时，它将填充一些内容在mysql数据库中包含数据的输入框中…如果一个自定义用户改变主意，一个简单的删除或添加表将满足需要…就像我说的，这是概念的初始阶段。我尝试了你的示例。它将创建3个输入框，每个输入框都有一个删除选项和一个添加行按钮。当我单击任何一个init时三个删除按钮…所有内容都将消失。当我单击添加另一行时，新创建的“删除行”按钮不起作用，数学也不起作用。尽管如此，你给了我一个开始工作的想法。我将我的脚本更改为以下内容…请参见上面的编辑：希望我在编辑过程中解决了大多数问题。事实上ns out，jQuery的$.on（）不会将侦听器附加到与选择器匹配的元素，而是在代码执行后添加到DOM中。因为这些表行是动态添加的，所以必须在页面加载时将侦听器附加到DOM中存在的容器（“绑定元素”），并提供一个后代选择器，该选择器只会导致该元素上发生的事件触发侦听器（）示例（fiddle）。
$(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);

});