Современный облачный хостинг провайдер | Aéza
Контакты ООО "АЕЗА ГРУПП" ИНН 2312304914 ОГРН 1212300056430

Скрипт\таблица с автоподсчетом.

Статус
В этой теме нельзя размещать новые ответы.
zippo

zippo

Проверенные
Сообщения
76
Решения
1
Реакции
55
Баллы
8,120
Приветствую. Может кто то встречал нечто подобное как тут.
Код: 
https://ae-nekrasov.ru/kalkulyator/
Или вариант уже созданной таблицы с возможностью редактировать определенные столбцы с автоподсчетом?
Нашел такой вариант, но не знаю как сделать, что бы подсчет велся и когда вводимое число 0.5 2.3 , сейчас подсчет идет целого числа.

Код: 
<form>
<table border="1" cellpadding="1" cellspacing="1">
<tr><th colspan="6" style="color: #ff0000">Таблица</th></tr>
 
<tr><th>Наименование</th>
    <th>Этикет</td>
    <th>Цена</th>
    <th>ед.изм-я</th>
    <th>квадратура</th>
    <th>Общая сумма</th></tr>
 
<tr><td>Наименование1</td>
    <td>-</td>
    <td><input disabled="disabled" name="v1" value="300" /></td>
    <td>m2</td>
    <td><input placeholder="0" name="kol1" oninput="do_math (this.form)" /></td>
    <td><input disabled="disabled" name="sum1" value="0" /></td></tr>
 
<tr><td>Наименование2</td>
    <td>-</td>
    <td><input disabled="disabled" name="v2" value="400" /></td>
    <td>п.м</td>
    <td><input placeholder="0" name="kol2" oninput="do_math (this.form)" /></td>
    <td><input disabled="disabled" name="sum2" value="0" /></td></tr>
 
<tr><td>Наименование3</td>
    <td>-</td>
    <td><input disabled="disabled" name="v3" value="500" /></td>
    <td>m2</td>
    <td><input placeholder="0" name="kol3" oninput="do_math (this.form)" /></td>
    <td><input disabled="disabled" name="sum3" value="0" /></td></tr>
 
<tr><td>Наименование4</td>
    <td>-</td>
    <td><input disabled="disabled" name="v4" value="600" /></td>
    <td>m2</td>
    <td><input placeholder="0" name="kol4" oninput="do_math (this.form)" /></td>
    <td><input disabled="disabled" name="sum4" value="0" /></td></tr>
<tr><td colspan="5" style="text-align: right; padding-right: 10px">Итого:</td>
    <td><input disabled="disabled" name="m1" value="0" /></tr>
</table>
</form>
 
<script>
function do_math (f)
{
for (var s = 0, j = 1; j < 5; j++)
   {
   var v = parseFloat (f ['v' + j].value),
       k = parseInt (f ['kol' + j].value);
   f ['sum' + j].value = (f ['kol' + j].value != k) ? 0 : v * k;
   s += parseFloat (f ['sum' + j].value);
   }
f ['m1'].value = s;
}
</script>
Если что я знаю про раздел заказов. Вдруг кто то видел подобное в паблике.
 
Последнее редактирование:
zippo написал(а):
Приветствую. Может кто то встречал нечто подобное как тут.
Код: 
https://ae-nekrasov.ru/kalkulyator/
Или вариант уже созданной таблицы с возможностью редактировать определенные столбцы с автоподсчетом?
Нашел такой вариант, но не знаю как сделать, что бы подсчет велся и когда вводимое число 0.5 2.3 , сейчас подсчет идет целого числа.

Код: 
<form>
<table border="1" cellpadding="1" cellspacing="1">
<tr><th colspan="6" style="color: #ff0000">Таблица</th></tr>
 
<tr><th>Наименование</th>
    <th>Этикет</td>
    <th>Цена</th>
    <th>ед.изм-я</th>
    <th>квадратура</th>
    <th>Общая сумма</th></tr>
 
<tr><td>Наименование1</td>
    <td>-</td>
    <td><input disabled="disabled" name="v1" value="300" /></td>
    <td>m2</td>
    <td><input placeholder="0" name="kol1" oninput="do_math (this.form)" /></td>
    <td><input disabled="disabled" name="sum1" value="0" /></td></tr>
 
<tr><td>Наименование2</td>
    <td>-</td>
    <td><input disabled="disabled" name="v2" value="400" /></td>
    <td>п.м</td>
    <td><input placeholder="0" name="kol2" oninput="do_math (this.form)" /></td>
    <td><input disabled="disabled" name="sum2" value="0" /></td></tr>
 
<tr><td>Наименование3</td>
    <td>-</td>
    <td><input disabled="disabled" name="v3" value="500" /></td>
    <td>m2</td>
    <td><input placeholder="0" name="kol3" oninput="do_math (this.form)" /></td>
    <td><input disabled="disabled" name="sum3" value="0" /></td></tr>
 
<tr><td>Наименование4</td>
    <td>-</td>
    <td><input disabled="disabled" name="v4" value="600" /></td>
    <td>m2</td>
    <td><input placeholder="0" name="kol4" oninput="do_math (this.form)" /></td>
    <td><input disabled="disabled" name="sum4" value="0" /></td></tr>
<tr><td colspan="5" style="text-align: right; padding-right: 10px">Итого:</td>
    <td><input disabled="disabled" name="m1" value="0" /></tr>
</table>
</form>
 
<script>
function do_math (f)
{
for (var s = 0, j = 1; j < 5; j++)
   {
   var v = parseFloat (f ['v' + j].value),
       k = parseInt (f ['kol' + j].value);
   f ['sum' + j].value = (f ['kol' + j].value != k) ? 0 : v * k;
   s += parseFloat (f ['sum' + j].value);
   }
f ['m1'].value = s;
}
</script>
Если что я знаю про раздел заказов. Вдруг кто то видел подобное в паблике.
Нажмите для раскрытия...
Взято с твоей ссылки.
Набросал с большего. jQuery немного подкорректировал, убрал функции, требующие подключение доп.библиотек.
Сохранение в xml,pdf не убирал из кода, возможно понадобится (тогда нужно дописывать бэкэнд), если не надо, удалишь из jQuery.
Короче приведёшь в порядок что надо.
Собрано под HTML-код шаблона для созданной страницы.
Код: 
<style>
#smeta table {
  width: 100%;
  border: none;
}
#smeta table tr th:nth-child(1), #smeta table tr td:nth-child(1) {
  width: 3%;
}
#smeta table tr th:nth-child(2), #smeta table tr td:nth-child(2) {
  width: 42%;
}
#smeta table tr th:nth-child(3), #smeta table tr td:nth-child(3) {
  width: 10%;
}
#smeta table tr th:nth-child(4), #smeta table tr td:nth-child(4) {
  width: 10%;
}
#smeta table tr th:nth-child(5), #smeta table tr td:nth-child(5) {
  width: 10%;
}
#smeta table tr th:nth-child(6), #smeta table tr td:nth-child(6) {
  width: 10%;
}
#smeta table tr th:nth-child(7), #smeta table tr td:nth-child(7) {
  width: 15%;
}
#smeta table tr td textarea {
  width: 100%;
  resize: vertical;
  height: 36px;
  min-height: 36px;
  display: block;
  font-size: 17px;
  line-height: 35px;
  padding: 0 10px;
  overflow: hidden;
}   
#smeta table tr td input {
  display: block;
  width: 100%;
  height: 36px;
  font-size: 17px;
  line-height: 35px;
  padding: 0 10px;
}   
#smeta table tr td .row_button {
  display: flex;
  justify-content: space-around;
}   
#smeta table tr td .row_button .del_row_button {
  position: relative;
  cursor: pointer;
  width: 20px;
}
#smeta table tr td .row_button .add_row_button {
  position: relative;
  cursor: pointer;
  width: 20px;
}   
#smeta table tr td .row_button .del_row_button .minus {
  background: red;
  width: 14px;
  height: 4px;
  position: absolute;
  left: 50%;
  margin-left: -7px;
  top: 50%;
  margin-top: -2px;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
#smeta table tr td .row_button .add_row_button div.plus_1 {
  background: green;
  width: 14px;
  height: 4px;
  position: absolute;
  left: 50%;
  margin-left: -7px;
  top: 50%;
  margin-top: -2px;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
#smeta table tr td .row_button .add_row_button div.plus_2 {
  background: green;
  width: 4px;
  height: 14px;
  position: absolute;
  left: 50%;
  margin-left: -2px;
  top: 50%;
  margin-top: -7px;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}   
#smeta .itogo {
  padding-right: 15%;
  text-align: right;
  font-size: 20px;
  margin-top: 15px;
}
#smeta .buttons {
  display: flex;
  justify-content: space-between;
  margin-top: 30px;
}
#smeta .buttons .buttons_add .add_row, #smeta .buttons .buttons_add .add_five_row {
 
  display: inline-flex;
  flex-direction: row;
  cursor: pointer;
  user-select: none;
}
    
</style>
<div id="smeta">
    <table>
        <tr>
            <th></th>
            <th>Наименование</th>
            <th>Ед. изм</th>
            <th>Цена</th>
            <th>Кол-во</th>
            <th>Стоимость</th>
            <th></th>
        </tr>
    </table>
    <table id="smeta_id">
        <tbody>
            <tr>
                <td>1</td>
                <td><textarea></textarea></td>
                <td><input type="text" name=""></td>
                <td><input type="text" name="cena" value="0"></td>
                <td><input type="text" name="kolichestvo" value="0"></td>
                <td><input type="text" name="stoimost" readonly value="0"></td>
                <td>
                    <div class="row_button">
                        <div class="del_row_button">
                            <div class="minus"></div>
                        </div>
                        <div class="add_row_button">
                            <div class="plus_1"></div>
                            <div class="plus_2"></div>
                        </div>                       
                    </div>
                </td>
            </tr>
        </tbody>
    </table>
    <div class="itogo">Итого по смете <span class="itogo_price">0</span>&nbsp;<span style="padding-right:10px;">руб</span></div>
    <div class="buttons">
        <div class="buttons_add">
            <div class="add_row">
                <div>
                    <div class="plus1"></div>
                    <div class="plus2"></div>
                </div>
                <div>добавить строку</div>
            </div>
            <div class="add_five_row">
                <div>
                    <div class="plus1"></div>
                    <div class="plus2"></div>
                </div>
                <div>добавить 5 строк</div>
            </div>
        </div>
        <div class="buttons_save">
                <input type="button" id="save_excel" value="Сохранить в excel">
                <input type="button" id="save_pdf" value="Сохранить в pdf">
        </div>
    </div>
</div>


<xf:js>
jQuery(document).ready(function () {
    var html_row = '<tr><td>1</td><td><textarea></textarea></td><td><input type="text" name="" id=""></td><td><input type="text" name="cena" id="" value="0"></td><td><input type="text" name="kolichestvo" id="" value="0"></td><td><input type="text" name="stoimost" id="" readonly value="0"></td><td><div class="row_button"><div class="del_row_button"><div class="minus"></div></div><div class="add_row_button"><div class="plus_1"></div><div class="plus_2"></div></div></td></tr>';

    jQuery('.add_row').on('click', function () {
        jQuery("#smeta table#smeta_id").append(html_row);
        numb_row();
        itogovaia_cena();
    });

    jQuery('.add_five_row').on('click', function () {
        jQuery("#smeta table#smeta_id").append(html_row);
        jQuery("#smeta table#smeta_id").append(html_row);
        jQuery("#smeta table#smeta_id").append(html_row);
        jQuery("#smeta table#smeta_id").append(html_row);
        jQuery("#smeta table#smeta_id").append(html_row);
        numb_row();
        itogovaia_cena();
    });

    jQuery('#smeta').on('click', '.add_row_button', function () {
        jQuery(this).parent().parent().parent().after(html_row);
        numb_row();
        itogovaia_cena();
    });

    function itogovaia_cena() {
        var summ = 0;
        jQuery('#smeta input[name="stoimost"]').each(function () {
            summ = summ + Number(jQuery(this).val());
        });
        jQuery('#smeta .itogo_price').text(Math.round((summ) * 100) / 100);
    }



    jQuery('#smeta').on('click', '.copy_row_button', function () {
        var copy_element = jQuery(this).parent().parent().parent().clone();
        jQuery(this).parent().parent().parent().after(copy_element);
        numb_row();
        itogovaia_cena();
    });

    jQuery('#smeta table#smeta_id').on('click', '.del_row_button', function () {
        jQuery(this).parent().parent().parent().remove();
        numb_row();
        itogovaia_cena();
    });

    jQuery('#smeta table#smeta_id').on('change', 'input[name="cena"]', function () {
        var cena = jQuery(this).val();
        if (!cena.match(/^[0-9]{0,}[.,]{0,1}[0-9]{0,}$/)) {
            jQuery(this).val(0);
            cena = 0;
        }
        cena = cena.toString().replace(",", ".");
        var kolichestvo = jQuery(this).parent().parent().find('input[name="kolichestvo"]').val();
        kolichestvo = kolichestvo.toString().replace(",", ".");
        jQuery(this).parent().parent().find('input[name="stoimost"]').val(Math.round((Number(kolichestvo) * Number(cena)) * 100) / 100);
        itogovaia_cena();
    });

    jQuery('#smeta table#smeta_id').on('change', 'input[name="kolichestvo"]', function () {

        var kolichestvo = jQuery(this).val();
        if (!kolichestvo.match(/^[0-9]{0,}[.,]{0,1}[0-9]{0,}$/)) {
            jQuery(this).val(0);
            kolichestvo = 0;
        }
        kolichestvo = kolichestvo.toString().replace(",", ".");
        var cena = jQuery(this).parent().parent().find('input[name="cena"]').val();
        cena = cena.toString().replace(",", ".");
        jQuery(this).parent().parent().find('input[name="stoimost"]').val(Math.round((Number(kolichestvo) * Number(cena)) * 100) / 100);
        itogovaia_cena();
    });

    function numb_row() {
        jQuery('table#smeta_id td:first-child').each(function (i) {
            jQuery(this).html(i + 1);
        });
    }

    jQuery('#smeta #save_excel').on('click', function (e) {
        e.preventDefault();
        var button = jQuery(this);
        if (Number(jQuery('#smeta .itogo_price').text()) == 0) {
            button.attr('disabled', 'disabled');
            jQuery("#smeta .itogo").before('<div class="error_message">Вы не заполнили ни одной строки !</div>');
            setTimeout(function () {
                jQuery('#smeta .error_message').remove();
                button.removeAttr('disabled');
            }, 3000);
            return
        }
        var main_arr = [];
        var row_arr = [];
        jQuery('table#smeta_id tr').each(function (i) {
            row_arr = [];
            jQuery(this).find('textarea').each(function () {
                row_arr.push(jQuery(this).val());
            });
            jQuery(this).find('input').each(function () {
                row_arr.push(jQuery(this).val());
            });
            main_arr.push(row_arr);
        });

        var send = new Object();
        send.arr = main_arr;

        jQuery.ajax({
            type: 'post',
            contentType: 'application/json',
            url: '/wp-content/smeta/ajax/excel.php',
            data: JSON.stringify(send),
            success: function (data) {
                var arr = JSON.parse(data);
                if (arr[0] == 0) {
                    jQuery("#smeta .itogo").before('<div class="error_message">Нет ни одной полностью заполненной строки !</div>');
                    setTimeout(function () {
                        jQuery('#smeta .error_message').remove();
                        button.removeAttr('disabled');
                    }, 3000);
                } else {
                    var name_excel = data + '.xlsx';
                    var link = document.createElement('a');
                    document.body.appendChild(link);
                    link.setAttribute('href', arr[1]);
                    link.setAttribute('download', arr[0] + '.xlsx');
                    //link.setAttribute("target", "_blank");
                    link.click();
                    return false;
                }
            }
        });
    });






    jQuery('#smeta #save_pdf').on('click', function (e) {
        e.preventDefault();
        var button = jQuery(this);
        if (Number(jQuery('#smeta .itogo_price').text()) == 0) {
            button.attr('disabled', 'disabled');
            jQuery("#smeta .itogo").before('<div class="error_message">Вы не заполнили ни одной строки !</div>');
            setTimeout(function () {
                jQuery('#smeta .error_message').remove();
                button.removeAttr('disabled');
            }, 3000);
            return
        }
        var main_arr = [];
        var row_arr = [];
        jQuery('table#smeta_id tr').each(function (i) {
            row_arr = [];
            jQuery(this).find('textarea').each(function () {
                row_arr.push(jQuery(this).val());
            });
            jQuery(this).find('input').each(function () {
                row_arr.push(jQuery(this).val());
            });
            main_arr.push(row_arr);
        });

        var send = new Object();
        send.arr = main_arr;

        jQuery.ajax({
            type: 'post',
            contentType: 'application/json',
            url: '/wp-content/smeta/ajax/pdf.php',
            data: JSON.stringify(send),
            success: function (data) {
                var arr = JSON.parse(data);
                if (arr[0] == 0) {
                    jQuery("#smeta .itogo").before('<div class="error_message">Нет ни одной полностью заполненной строки !</div>');
                    setTimeout(function () {
                        jQuery('#smeta .error_message').remove();
                        button.removeAttr('disabled');
                    }, 3000);
                } else {
                    var name_pdf = arr[0] + '.pdf';
                    var link = document.createElement('a');
                    document.body.appendChild(link);
                    link.setAttribute('href', arr[1]);
                    link.setAttribute('download', arr[0] + '.pdf');
                    //link.setAttribute("target", "_blank");
                    link.click();
                    return false;
                }
            }
        });
    });
});
</xf:js>
 
DimmmCom написал(а):
DimmmCom написал(а):
Взято с твоей ссылки.
Набросал с большего. jQuery немного подкорректировал, убрал функции, требующие подключение доп.библиотек.
Сохранение в xml,pdf не убирал из кода, возможно понадобится (тогда нужно дописывать бэкэнд), если не надо, удалишь из jQuery.
Короче приведёшь в порядок что надо.
Собрано под HTML-код шаблона для созданной страницы.
Нажмите для раскрытия...
Нажмите для раскрытия...
Да там для полного функционала надо dompdf. Спасибо работает. Подправил и добавил jquery-ui.min.js теперь все как положено, дублирует перетаскивает)) с сохранением excel буду смотреть.
 
Последнее редактирование:
Статус
В этой теме нельзя размещать новые ответы.
Современный облачный хостинг провайдер | Aéza
Контакты
ООО "АЕЗА ГРУПП" ИНН 2312304914 ОГРН 1212300056430 г. Краснодар, ул. Маяковского 160, офис 2.4

Похожие темы

A
  • Вопрос
XF 1.4 Перенёс форум на сервер с php 7.3.33 заработал но темы не открываются: Fatal error: Method XenForo_BbCode_TextWrapper::__toString()
Ответы
7
Просмотры
439
adobe
A
MrOne
  • Закрыта
  • Решено
Оптимизация VPS (apache2 + nginx + mysql)
Ответы
1
Просмотры
924
Smalesh
Smalesh
Sidd
Магазин своих и чужих товаров на форуме Digiseller
Ответы
7
Просмотры
3K
Boogeyman
Boogeyman
Rommax
else - не отображается .
Ответы
1
Просмотры
444
Exile
Exile
GrafMishka
  • Вопрос
Конфликт с js
Ответы
1
Просмотры
381
Skaiman
Skaiman
Назад
Сверху Снизу