0

以下可以使用点击事件添加或删除表格。在顶部有一个不是动态创建的表，我有一个名为 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>

编辑：

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

1 回答 1

0

您可以考虑尝试以下结构：

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

并生成如下所示的表行：

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

});

这是一个 jsFiddle 演示，其中包括一些非常基本的输入验证：http: //jsfiddle.net/F2hxH/10/

于 2013-11-08T23:39:11.500 回答