суммирование динамически создаваемых входов

Следующие могут добавлять или удалять таблицу, используя события click. В верхней части есть таблица, которая не создана динамически, у меня есть поле ввода, называемое 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>

источник

2013-11-08 stapuff

вы имеете в виду, что пользователь может добавить или удалить строку с помощью кнопки мыши события? Ваше описание указывает, что они добавляют совершенно новую таблицу. Есть ли причина, по которой будут использоваться несколько таблиц, а не одна таблица с несколькими строками (для ввода часов)? –

Я ценю ответ назад. Да, пользователь сможет добавить или удалить таблицу. Проект находится на ранних стадиях. Каждая таблица будет содержать 25 или около того элементов, каждый из которых управляется mysql. – stapuff

Вы могли бы рассмотреть попытку следующую структуру:

<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-08 23:39:11

Концепция проекта заключается в том, что каждая таблица будет для одного элемента для формы тендера подрядчиков. Когда они выберут элемент для выпадающего списка, он заполнит некоторые из полей ввода данными ftom базы данных mysql ... – stapuff

Если пользовательский чейз их разум, просто удалить или добавить таблицу будет обрабатывать потребности ... как я сказал это однако на стадии младенчества. – stapuff

Я попробовал ваш пример. Это создало бы 3 окна ввода, у которых была опция удаления для каждой и кнопка добавления строки. Когда я нажал на одну из первых трех кнопок удаления ... все исчезло бы. Когда я нажимаю, чтобы добавить другую строку, новая кнопка удаления строки не работала, и математика не работала. При всем том сказал, что ты дал мне представление о том, что я должен работать. Я изменил свой сценарий на следующий ... см. Выше edit: – stapuff

суммирование динамически создаваемых входов

ответ

Смежные вопросы