Форум

рони · #11 (**permalink**) 05.12.2017, 20:40

Taichi,
вставить количество и цену

<html>
<head>
<meta charset="utf-8">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<style>
table tbody:first-child td:last-child input {
    display: none; /* кнопка удаления в первой строке таблицы недоступна*/
}
.total {
  margin-left: 400px;
}

</style>
<script type="text/javascript">
$(function() {
    var tbl = $('table');
    $('#add').click(function() {
        tbl.children() //получаем детишек - TR/TBODY
           .first() //берем первого
           .clone() //клонируем
           .appendTo(tbl) //добавляем в таблицу
           .find('input') //получаем поля ввода
           .filter(':text').val('') //выбираем текстовые поля (если кнопка удаления не input, то этого не надо)
           .end() //в начало набора
           .last().click(function() { //получаем кнопку удаления (если кнопка удаления не input, то ищем нужно вместо last())
                $(this).closest('tr').remove() //удаляем добавленную строку
                sum();
           })
    });
function sum()
{
     var a = document.querySelectorAll('input[name="a[]"]'),
      b = document.querySelectorAll('input[name="b[]"]'),
      c = document.querySelectorAll('input[name="c[]"]'),
      t = document.querySelector('.total');
      t.innerHTML = [].reduce.call( a , function(s, el, i) {
       c[i].value = (+el.value||0) * (+b[i].value||0);
       return  s + +c[i].value
},0).toFixed(2) + " руб.";
}

$('form').on('input', 'input[name="a[]"], input[name="b[]"]', sum)





});
</script>
</head>
<body>
<form action="" method="post">
    <table>
        <tr>
            <td>
                <input name="a[]" />
            </td>
            <td>
                <input name="b[]" />
            </td>
            <td>
                <input name="c[]"  disabled="disabled"/>
            </td>
            <td>
                <input type="button" value="Del" />
            </td>
        </tr>
    </table>
    <span class="total"></span>
</form>
<button id="add">Add</button>
</body>
</html>

Taichi · #12 (**permalink**) 05.12.2017, 20:51

Спасибо, большое спасибо. Все в точку, как надо.

Taichi · #13 (**permalink**) 09.12.2017, 21:24

И снова проблема у меня.
Загнал я эти инпуты в базу данных.
Вытянул данные, расставил в те же инпуты, что бы можно было динамически редактировать (удалять уже записанную строку, добавить новою, и снова это все динамически подсчитать)

Меня очень напрягает синтаксис java.

Подскажите, как реализовать?

<script type="text/javascript">
        		$(function() {
		  //добавить строку табюлицы
		  $('#but').on('click', function() {
		    var row = $('.row:last');
		    row.clone().insertAfter(row);
		  });

		  //удалить строку таблицы
		  $('#tab').on('click', '.delete', removeRow);

		  function removeRow() {
		    $(this).closest('.row').remove();
		  }
		})

function sum()
{
     var a = document.querySelectorAll('input[name="a[]"]'),
      b = document.querySelectorAll('input[name="b[]"]'),
      c = document.querySelectorAll('input[name="c[]"]'),
      t = document.querySelector('.total');
	   alert( 'Привет, Мир!' );
      t.innerHTML = [].reduce.call( a , function(s, el, i) {
       c[i].value = (+el.value||0) * (+b[i].value||0);
       return  s + +c[i].value
},0).toFixed(2) + " грн";
}

$('form').on('input', 'input[name="a[]"], input[name="b[]"]', sum)



    </script>

а вот php i html

echo "<tr  class='row'>
<td width='16%'><input type='text' name='art[]'  style='width:100%' value=".$art[$x]."></td>
<td width='16%'><input type='text' name='name[]' style='width:100%'  value=".$name[$x]."></td>
<td width='8%'><input type='number' min='1' name='a[]' style='width:100%' value=".$a[$x]."></td>
<td width='16%'><input type='text' name='dealer[]'  style='width:100%' value=".$dealer[$x]."></td>
<td width='8%'><input type='number' min='0' name='zakup[]'  style='width:100%' value=".$zakup[$x]."></td>
<td width='8%'><input type='number' min='0' name='b[]' style='width:100%' value=".$b[$x]."></td>
<td width='8%'><input type='text' name='с[]' style='width:100%' disabled='disabled' ></td>
<td width='2%'><input type='checkbox' name='stage1[]' style='width:100%' value=".$stage1[$x]."></td>
<td width='2%'><input type='checkbox' name='stage2[]' style='width:100%' value=".$stage2[$x]."></td>
<td width='2%'><input type='checkbox' name='stage3[]' style='width:100%'  value=".$stage3[$x]."></td>
<td width='2%'><a href='#'><input class='delete' type='button' value='x' /> </a></td>
</tr>";}

 
 
 
  ?>

</table>
<table  id="tab" width="100%" >
<tr  class='row'> 
<td width='16%'><input type='text' name='art[]'  style='width:100%'></td>
<td width='16%'><input type='text' name='name[]' style='width:100%' ></td>
<td width='8%'><input type='number' min='1' name='a[]' style='width:100%' ></td>
<td width='16%'><input type='text' name='dealer[]'  style='width:100%'></td>
<td width='8%'><input type='number' min='0'  name='zakup[]'  style='width:100%' ></td>
<td width='8%'><input type='number' min='0' name='b[]' style='width:100%' ></td>
<td width='8%'><input type='text' name='c[]'  style='width:100%'  disabled='disabled' ></td>
<td width='2%'><input type='checkbox' name='stage1[]' style='width:100%'></td>
<td width='2%'><input type='checkbox' name='stage2[]' style='width:100%' ></td>
<td width='2%'><input type='checkbox' name='stage3[]' style='width:100%' ></td>
<td width='2%'> <input type="button" class='delete' value="x" /> </td>
</tr></table>
 
		<input type="button" value="Добавить еще поля" id="but" >
	<input type="submit" value="Редактировать заказ">
	
			</form>
			<span style="margin-left:600px" class="total">Вся сумма заказа грн.</span>

Форум

Справочник

Discord чат

Курсы javascript