Question

以下内容可以使用点击事件添加或删除表格。在顶部有一个不动态创建的表，我有一个名为name =“total_hrs”的输入字段，我想在每个输入中输入所有小时名称=“hours'+ i +'”< / p>

当前函数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>

Answer 1

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

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

总计动态创建的输入

1 个答案: