Калькулятор в таблице html

Содержание

Стильный кнопочный html калькулятор. Дек 7 2016
Таблица калькулятор
Простой калькулятор стоимости на jQuery
Что нужно сделать (небольшое ТЗ)
Что будем делать
Реализация. Шаг 1
Реализация. Пишем скрипт
Шаг последний. Немного оформим в CSS
Результат

Стильный кнопочный html калькулятор. Дек 7 2016

Иногда на своём сайте хочется, а иногда даже требуется разместить обычный кнопочный html калькулятор. В этой статье я покажу как создать обычный стильный кнопочный калькулятор с помощью HTML, CSS и JavaScript.

Создаём два файла: index.html и style.css.

Также я создала два фоновых рисунка, один для фона панели калькулятора, другой для фона кнопок. Вы можете этого не делать, а просто обозначить цвет фона панели и кнопок.

В коде файла index.html наш калькулятор будет выглядеть в виде таблицы, заключённой в форму. В качестве значения атрибута OnClick тегов input будет прописан код JavaScript, который делает html калькулятор рабочим.

В файле style.css пишем стили для html калькулятора.

body <
background : #858585;
>
.wrapper <
margin : 0 auto;
overflow : hidden;
width : 250px;
height : 270px;
background : url(fon.jpg);
border-radius : 10px;
border : 1px solid #949493;
box-shadow : 3px 3px 7px #000;
>
.main <
margin : 0 auto ;
margin-top : 5px;
width : 220px;
>
.display input <
background : #ccc;
margin : 0 auto;
overflow : hidden;
width : 207px;
height : 30px;
border-radius : 5px;
font-size : 24px;
>
.buttons input <
background : url(button.jpg);
margin : 0 auto;
overflow : hidden;
width : 50px;
height : 50px;
border-radius : 5px;
font-size : 24px;
>

В итоге должен получиться вот такой стильный кнопочный html калькулятор:

Конечно это — не инженерный калькулятор, но для расчёта простых арифметических действий вполне удобен.

Источник

Таблица калькулятор

Таблица+калькулятор(DLE)
Подскажите пожалуйста как сделать именно такую таблицу (мне нужно только подредактировать цены) и.

ПодТаблицы с данными(Таблица-Таблица-Таблица-Таблица) и наследованием
Имеется такая база с таблицами Район-МО-Цель-Зачача. Несколько вариантов связей передумал уже, но.

Повреждена какая-то таблица верхнего регистра или загрузочная таблица каки= то данных
Столько времени уже прошло, а тебе так никто и не помог. У меня сейчас при включении моноблока.

1 2 3 4 5 6 7 8 9 10 11 12 13

table { border:1px solid #999999; width:600px; } td { border-right:1px solid #999999; border-bottom:1px solid #999999 } #info td { padding:15px; }

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22

var data = null; function calc() { var inStock = +(data[1].innerHTML).replace(/\D+/g,""); var price = +(data[2].innerHTML).replace(/\D+/g,""); var amount = +data[3].firstChild.value; if(!isNaN(amount) && amount > 0 && amount  inStock) { data[4].innerHTML = price * amount; }else { if(amount > inStock) { alert("В наличии только " + inStock + " тов."); data[3].firstChild.value = inStock; calc(); }else { alert("Введите цифровое значение!"); } } } window.onload = function() { data = document.getElementById("info").getElementsByTagName("td"); }

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16

table width="100%" border="0" cellspacing="0" cellpadding="2"> tr> td>strong>Предмет/strong>/td> td>strong>В наличии/strong>/td> td>strong>Цена/strong>/td> td>strong>Количество/strong>/td> td>strong>Общая цена/strong>/td> /tr> tr id="info"> td>Ручка гелевая/td> td>40 шт./td> td>5 руб./td> td>input type="text" onkeyup="calc()" />/td> td>/td> /tr> /table>

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66

 html xmlns="http://www.w3.org/1999/xhtml"> head> meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> title>Untitled Document/title> style type="text/css"> table < border:1px solid #999999; width:600px; >td < border-right:1px solid #999999; border-bottom:1px solid #999999 >#info td < padding:15px; >/style> script type="text/javascript"> var data = null; function calc() < var inStock = +(data[1].innerHTML).replace(/\D+/g,""); var price = +(data[2].innerHTML).replace(/\D+/g,""); var amount = +data[3].firstChild.value; if(!isNaN(amount) && amount > 0 && amount  data[4].innerHTML = price * amount; >else < if(amount >inStock) < alert("В наличии только " + inStock + " тов."); data[3].firstChild.value = inStock; calc(); >else < alert("Введите цифровое значение!"); >> > window.onload = function() < data = document.getElementById("info").getElementsByTagName("td"); >/script> /head> body> table width="100%" border="0" cellspacing="0" cellpadding="2"> tr> td>strong>Предмет/strong>/td> td>strong>В наличии/strong>/td> td>strong>Цена/strong>/td> td>strong>Количество/strong>/td> td>strong>Общая цена/strong>/td> /tr> tr id="info"> td>Ручка гелевая/td> td>40 шт./td> td>5 руб./td> td>input type="text" onkeyup="calc()" />/td> td>/td> /tr> /table> /body> /html>

и когда это все вел себе на страницу уменя объщею суму не выдоет куда что надо дописать?
я вас замучаю

Сообщение от JsLoveR

Так все нормально скапировал и все равно сами даже можете погледеть http://wise-jd.clan.su/index/torgovlja/0-9

Добавлено через 38 секунд
А может туда Какую кнопку приделать чтобы он считал ?

Добавлено через 9 минут

Сообщение от JsLoveR

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69

 html xmlns="http://www.w3.org/1999/xhtml"> head> meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> title>Untitled Document/title> style type="text/css"> table < border:1px solid #999999; width:600px; >td < border-right:1px solid #999999; border-bottom:1px solid #999999 >#info td < padding:15px; >/style> script type="text/javascript"> var data = null; function calc() < var inStock = +(data[1].innerHTML).replace(/\D+/g,""); var price = +(data[2].innerHTML).replace(/\D+/g,""); var amount = +data[3].firstChild.value; if(!isNaN(amount) && amount > 0 && amount  data[4].innerHTML = price * amount; >else < if(amount >inStock) < alert("В наличии только " + inStock + " тов."); data[3].firstChild.value = inStock; calc(); >else < alert("Введите цифровое значение!"); >> > window.onload = function() < data = document.getElementById("info").getElementsByTagName("td"); >/script> /head> body> table width="100%" border="0" cellspacing="0" cellpadding="2"> tr> td>strong>Предмет/strong>/td> td>strong>В наличии/strong>/td> td>strong>Цена/strong>/td> td>strong>Количество/strong>/td> td>strong>Общая цена/strong>/td> td>strong>Выбрать/strong>/td> /tr> tr id="info"> td>Ручка гелевая/td> td>40 шт./td> td>5 руб./td> td>input type="text" onkeyup="calc()" />/td> td>input type="checkbox" name="" value="">/td> td>а тут кнопка купить/td> когда нажмут кнопку купит пусть комне в личку прейдет письмо что хотят купить ручку гелевую 40 шт ? td>/td> /tr> /table> /body> /html>

br />br /> function calc() { br /> var inStock

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69

html xmlns="http://www.w3.org/1999/xhtml"> head> meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> title>Untitled Document/title> style type="text/css"> table < border:1px solid #999999; width:600px; >td < border-right:1px solid #999999; border-bottom:1px solid #999999 >#info td < padding:15px; >/style> script type="text/javascript"> var data = null; function calc() < var inStock = +(data[1].innerHTML).replace(/\D+/g,""); var price = +(data[2].innerHTML).replace(/\D+/g,""); var amount = +data[3].firstChild.value; if(!isNaN(amount) && amount > 0 && amount  data[4].innerHTML = price * amount; >else < if(amount >inStock) < alert("В наличии только " + inStock + " тов."); data[3].firstChild.value = inStock; calc(); >else < alert("Введите цифровое значение!"); >> > window.onload = function() < data = document.getElementById("info").getElementsByTagName("td"); >/script> /head> body> table width="100%" border="0" cellspacing="0" cellpadding="2"> tr> td>strong>Предмет/strong>/td> td>strong>В наличии/strong>/td> td>strong>Цена/strong>/td> td>strong>Количество/strong>/td> td>strong>Общая цена/strong>/td> td>strong>Выбрать/strong>/td> td>strong>Купить/strong>/td> /tr> tr id="info"> td>Ручка гелевая/td> td>40 шт./td> и вот тут должно вышитыватся при покупки того или иного вида вещи ну на даный момент ручки это если купили 10 шт то он должен показать сколько еще осталось в наличи. td>5 руб./td> td>input type="text" onkeyup="calc()" />/td> td>input type="checkbox" name="" value="">/td> td>input type="submit" value="Купить">/td> td>/td> /tr> /table> /body> /html>

Поможите? А так все работает и огромное вам спасибо но хотелось бы доделать тоблицу до конца.

Добавлено через 57 секунд
ой Выщитыватся мазги кипят

Добавлено через 11 минут

td>input type="submit" value="Купить">/td>

здесь должно высылать письмо мне на личку на сайте что хотят купить и сколько.

Добавлено через 4 часа 19 минут
я так понимаю больше помагать не хотим ? ну хотябы скажите как в 2 блог зделать.

tr> td>гнига/td> td>50шт/td> td>5р/td> td>input id="colvo" onkeyup="summ()">/td> td>div id="result">/div>/td> /tr>

Источник

Простой калькулятор стоимости на jQuery

Здесь напишем небольшой калькулятор, который будет выполнять подсчет стоимости работ, услуг, еще чего-то (подробности ниже).

Есть таблица, в которой список работ и цены к ним, примерно вот такая:

Услуга	Кол-во	ед. изм.	Цена (р)
Написать статью	1000	зн.	50
Вбить гвоздь	5	шт.	100
Подумать	10	мин.	150
Выдернуть гвоздь	1	шт	20

  Услуга  Кол-во  ед. изм.  Цена (р)  
 Написать статью  1000  зн.  50  
 Вбить гвоздь  5  шт.  100  
 Подумать  10  мин.  150  
 Выдернуть гвоздь  1  шт  20

Здесь есть несколько работ, с разными единицами измерения (что вообще не важно), разным минимальным количеством, ценой.

Что нужно сделать (небольшое ТЗ)

Сделать количество в виде поля, с возможностью ввода произвольного значения
В поле «Количество» должны быть кнопки +/- для изменения значения с заданным интервалом, шагом (для одних работ добавлять +1, для других +5, +20 и т.д.)
Шаг может отличаться от минимального количества. Например: стоимость «Написание статьи» минимально указана за 1000 знаков, а в дальнейшем нужно добавлять +200 знаков за шаг.
Произвольно вводимые значения должны соответствовать указанному шагу. Т.е. при шаге «5» и попытке указать вручную «2», значение должно автоматом меняться на «5».
После таблицы должна быть сумма «Итого»

Что будем делать

Добавить поле input для ввода количества
Добавить в таблицу «Шаг» (этого параметра у нас нет). Можно в виде скрытого поля, видимого значения, или атрибута. Здесь уж как удобнее. Я буду делать атрибутом для поля ввода количества
К input добавить +/-
Добавить классы элементам с данными (в данном случае — ячейки таблицы, но это могут быть и блоки)
Написать небольшой скрипт, чтобы это работало

Реализация. Шаг 1

Для начала добавлю в талицу классы и недостающее поле. Получится так:

  Услуга  Кол-во  ед. изм.  Цена (р)  
 Написать статью    + - 
  знаков  0  
 Вбить гвоздь    + - 
  шт.  0  
 Подумать    + - 
  мин.  0  
 Выдернуть гвоздь    + - 
  шт  0  
 
 Итого:
0 руб.

Что здесь для чего и почему:

Вместо количества появилось поле «quant» с атрибутами data-step (шаг), data-price (цена шага), data-min (минимальное количество)
Строкам добавлен класс «t-row» для нахождения родителя в js. Добавил для легкой переделки из таблицы в блоки (можно было обращаться и к тегу «tr»)
Для всей таблицы добавлен класс «calc». Таких таблиц на странице может быть сколько угодно, используем этот класс, соблюдаем структуру и все будет работать одним скриптом
Цена установлена = 0 и добавлен класс «price» — для нахождения блока скриптом

Реализация. Пишем скрипт

Т.к. скрипт будет работать с использованием библиотеки jQuery, ее необходимо подключить, что скорее всего уже и так сделано (идет в комплекте с большинством шаблонов, тем, включена как стандартная у многих CMS).

Будет три функции: две будут менять значение input, в зависимости от способа изменения — по кнопкам, или путем ввода с клавиатуры. Третья будет подсчитывать цену и выводить итого.

/*Обрабатываем нажатия на кнопки + и - */ $('.minpl').click(function() < /*Находим input*/ $input = $(this).parent().find('.quant'); var qty = Number($input.val()); /*На случай, если количество не удалось определить (например, пользователь мог оставить поле пустым)*/ if (isNaN(qty)) qty = 0; if ($(this).hasClass('plus')) < if (qty == 0) < qty = $input.data('min'); >else < qty += $input.data('step'); >> else < qty -= $input.data('step'); >var min = $input.data('min'); if (qty >= min) < $input.val(qty).trigger('input'); >else < $input.val(0).trigger('input'); >/*Передаем функции подсчета, обновления*/ updateCalc($input); >); /*Обрабатываем ввод с клавиатуры */ $('.quant').change(function() < var qty = $(this).val(); if (isNaN(qty)) qty = 0; var min = $(this).data('min'); var step = $(this).data('step'); if (qty >0) < /*Если вдруг число не кратно шагу, увеличиваем (только увеличение) до кратного*/ qty = Math.ceil(qty/step)*step; if (qty < min) < qty = min; >$(this).val(qty).trigger('input'); > else < $(this).val(0).trigger('input'); >updateCalc($(this)); >); /*Считаем, обновляем значения*/ function updateCalc($input)< var qty = Number($input.val()); if (isNaN(qty)) qty = 0; $input.parents('.t-row').find('.price').text(qty * $input.data('price')/$input.data('step')); var itog = 0; $input.parents('.calc').find('.price').each(function()< itog += parseInt($(this).text()); >); $input.parents('.calc').next().find('.val').text(itog); >

Шаг последний. Немного оформим в CSS

.inp-group .inp-group .quant .inp-group .minpl .inp-group .minpl:hover .inp-group .plus .inp-group .minus

Результат

Для удобства публикую через codepen

Источник