1

У меня есть таблица с input внутри каждой ячейки, я динамически создаю новые ячейки этой таблицы.

Сначала у нас такая таблица

При нажатии на кнопку я добавляю новые значение ячеек. Получается что-то вроде такого

Нужно просуммировать рядок и вывести значение в первый ячейку рядка( там где input disabled ).

Алгоритм я вроде понимаю : нужно взять значение инпута и просуммировать в какую-то переменную, но не могу захватить все input рядка, так как проблема в их динамическом создании?

$(document).ready(function() {

  $('#add').click(function() {
    $('<td><input type="text"  name="dynamic[]" value="0" /></td>').appendTo('tr.add');
  });



});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<p>
  <button type="button" id="add">Добавить поля</button>
</p>


<table>
  <form action="">
    <tr class='add'>
      <th>
        <input type="text" disabled value='0'>
      </th>
      <th>
        <input type="text" value='0'>
      </th>
      <th>
        <input type="text" value='0'>
      </th>
    </tr>
    <tr class='add'>
      <td>
        <input type="text" disabled value='0'>
      </td>
      <td>
        <input type="text" value='0'>
      </td>
      <td>
        <input type="text" value='0'>
      </td>
    </tr>
    <tr class='add'>
      <td>
        <input type="text" disabled value='0'>
      </td>
      <td>
        <input type="text" value='0'>
      </td>
      <td>
        <input type="text" value='0'>
      </td>
    </tr>
  </form>
</table>

3
  • весь код ваш сюда. html+js+css 23 фев 2016 в 13:24
  • выбираете ряд, и выбираете все инпуты в ряду, а далее все значениея
    – Grundy
    23 фев 2016 в 13:27
  • добавляйте необходимый код прямо в вопрос
    – Grundy
    23 фев 2016 в 13:36

2 ответа 2

1

Думаю нужно сделать так:

1) во первых вместо таблицы сделать все на блоках, для каждого ряда завести div и в него добавлять элементы input.

2) при добавлении каждого input сразу же вешать на него событие onkeyup.

3) при каждом событии пробегаться по всем input дива в котором храниться ряд и считать сумму.

Не уверен, что я ничего не перепутал, но могу предложить такую реализацию:

<button id="add_input">Добавить input</button>
<div id="div_sum"></div>
<div id="input_list"></div>

<script>

       function get_sum() {

          var sum = 0;

          for (var x = input_list.firstChild; x != null; x = x.nextSibling) {
              if (x.nodeType = 1 && x.value) {

                  sum = sum + parseFloat(x.value);

              }
          }

            div_sum.innerHTML = 'Сумма: ' + sum;
        }

     window.onload = function () {
        var add_input = document.getElementById('add_input');
        var input_list = document.getElementById('input_list');
        var div_sum = document.getElementById('div_sum');

        add_input.onclick = function () {

            //добавляем input в div
            var input = document.createElement('input');
            input_list.appendChild(input);
            //сразу после добавления вешаем событие onkeyup на добавленный input
            input_list.lastChild.onkeyup = function () {
                get_sum();
            }
        }

        get_sum();

     };
</script>

Только при таком подходе нужно инкапсулировать переменные add_input, input_list, div_sum.

1

Решается подобным образом.
Пример на одной строке инпутов.

<!DOCTYPE html>
<html>
<head>
	<title>titile</title>
	<meta charset="utf-8">
	<style>

	</style>
	<script src="https://code.jquery.com/jquery-1.11.3.js"></script>
	<script>
		$(function(){
			$('.plus').on('click', function() {
				$(this).closest('.row').append('<input class="input" type="text">');
			});
			$('.sum').on('click', function() {
				var sum = 0;
				$(this).closest('.row').find('.input').each(function(index, el) {
					sum += parseFloat($(el).val());
				});;
				var output = isNaN(sum) ? 'Введи все значения' : sum;
				$(this).parent().find('.result').val(output);
			});
		});
	</script>
</head>
<body>

<div class="rows">
	<div class="row">
		<input class="plus" type="button" value="+">
		<input class="sum" type="button" value="sum">
		<input class="result" type="text" disabled="">
		<input class="input" type="text">
		<input class="input" type="text">
	</div>
</div>

</body>
</html>

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.