Untitled


<!DOCTYPE html>
<html lang="ru">
<head>

    <title>Магазин</title>

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <link rel="stylesheet" href="bootstrap.min.css" >
    <script src="jquery-3.4.1.min.js"></script>

</head>
<body>

    <div class="container">

        <div class="row">
            <div class="col-md-12">
                <h1 class="text-center">Лабораторная работа 4</h1>
            </div>
        </div>

        <div class="row">
            <div class="col-md-12">
                <h5>Каталог</h5>
            </div>
        </div>

        <div class="row">
            <div class="col-md-12 table-responsive-md table-hover">
                <table class="table">
                    <thead class="thead-dark">
                        <tr>
                            <th scope="col">Наименование</th>
                            <th scope="col">Артикул</th>
                            <th scope="col">Цена</th>
                        </tr>
                    </thead>
                    <tbody class="border" id="catalogue">
                        <tr>
                            <td>Краски акварель "Сонет" набор 24 цв.</td>
                            <td>3541139</td>
                            <td>686</td>
                        </tr>
                        <tr>
                            <td>Краски гуашь "Мастер Класс" набор 16 цв. 20 мл ассорти</td>
                            <td>1741092</td>
                            <td>583</td>
                        </tr>
                        <tr>
                            <td>Краски темпера "Мастер Класс" № 1 12 цв. 18 мл</td>
                            <td>1641007</td>
                            <td>1659</td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>

        <form>
            <h5>Добавить товар в каталог</h5>
            <div class="form-group row">
                <div class="col">
                    <input type="text" class="form-control" placeholder="Наименование" id="name" autocomplete="off">
                </div>
                <div class="col">
                    <input type="text" class="form-control inptctrl" placeholder="Артикул" maxlength="7" id="art" autocomplete="off">
                </div>
                <div class="col">
                    <input type="text" class="form-control inptctrl" placeholder="Цена" id="price" autocomplete="off">
                </div>
            </div>
            <div class="row">
                <div class="col">
                    <button type="button" class="btn btn-primary" id="btn">Добавить</button>
                </div>
            </div>
        </form>
        <br>
        <div class="row">
            <div class="col-md-12">
                <h5>Корзина</h5>
            </div>
        </div>

        <div class="row">
            <div class="col-md-12 table-responsive-md table-hover">
                <table class="table" >
                    <thead class="thead-dark">
                        <tr>
                            <th scope="col">Наименование</th>
                            <th scope="col">Артикул</th>
                            <th scope="col">Цена</th>
                        </tr>
                    </thead>
                    <tbody class="border" id="cart">
                        <tr>
                            <th scope="col">Сумма заказа</th>
                            <th scope="col"></th>
                            <th scope="col" id="sum">0</th>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>

    </div>

    <script>
        function addRowHandlers() {
            var table = document.getElementById("catalogue");
            var table2 = document.getElementById("cart");
            var rows = table.getElementsByTagName("tr");
            for (i = 0; i < rows.length; i++) {
                var currentRow = table.rows[i];
                var createClickHandler =
                function(row)
                {
                    return function() {
                        function addProducts() {
                            var row1 = table2.insertRow(0);
                            var cell1 = row1.insertCell(0);
                            var cell2 = row1.insertCell(1);
                            var cell3 = row1.insertCell(2);
                            var x = cell11.innerHTML;
                            var y = cell22.innerHTML;
                            var z = cell33.innerHTML;
                            cell1.innerHTML = x;
                            cell2.innerHTML = y;
                            cell3.innerHTML = z;
                            return false;
                        }
                        function sumUp() {
                            var tables = document.getElementById("cart"), sumVal = 0;
                            for(var i = 0; i < (tables.rows.length - 1); i++) {
                                sumVal = sumVal + parseInt(tables.rows[i].cells[2].innerHTML);
                            }
                            document.getElementById("sum").innerHTML = sumVal;
                        }
                        var cell11 = row.getElementsByTagName("td")[0];
                        var cell22 = row.getElementsByTagName("td")[1];
                        var cell33 = row.getElementsByTagName("td")[2];
                        var id = cell11.innerHTML;
                        addProducts();
                        sumUp();
                    };
                };

                currentRow.onclick = createClickHandler(currentRow);
            }
        }
        window.onload = addRowHandlers();
        const btn = document.getElementById("btn");
        btn.addEventListener("click", addProduct);
        btn.addEventListener("click", addRowHandlers);
        function addProduct() {
            var table = document.getElementById("catalogue");
            var flag = true;
            var x = document.getElementById("name").value;
            var y = document.getElementById("art").value;
            var z = document.getElementById("price").value;
            for (var i=0; i<(table.rows.length - 1); i++){
                var double = table.rows[i].cells[0].innerHTML;
                if ((double == x)||(x == "")||(y == "")||(z == "")) {
                    var realdouble = double;
                    flag = false;
                }
            }
            if (flag) {
                var row = table.insertRow(0);
                var cell1 = row.insertCell(0);
                var cell2 = row.insertCell(1);
                var cell3 = row.insertCell(2);
                document.getElementById("name").value = "";
                document.getElementById("art").value = "";
                document.getElementById("price").value = "";
                cell1.innerHTML = x;
                cell2.innerHTML = y;
                cell3.innerHTML = z;
            } else if (x == realdouble){
                alert("Такой товар уже есть");
            } else if ((x == "")||(y == "")||(z == "")) {
                alert("Пожалуйста, заполните все поля");
            }
            return false;
        }

        $('.inptctrl').keyup(function () {
            if (!this.value.match(/^^[0-9]$/)) {
                this.value = this.value.replace(/[^0-9]/g, '');
            }
        });
    </script>

</body>
</html>