Простое приложение CRUD на JavaScript, часть 2

Давайте перейдем к последней части этой серии. В этой статье мы собираемся продолжить создание приложения CRUD. Если вы не видели первую часть, сначала проверьте Часть 1.

Начнем!😍

lastPart — напишите логику для обновления/редактирования и удаления.

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

В части 1 я создал функцию 'displayProduct' для отображения всех данных о продуктах в журнале консоли, но теперь нам нужно отобразить данные на HTML-странице, поэтому сначала давайте изменим функцию'displayProduct'.

let displayProduct = () => {

let tbody = document.getElementById('product-data');
let rows = '';

products.forEach((products,i) => {
    rows+= `<tr><th scope="row"></th>
    <td>${products.name}</td>
    <td>${products.price}</td>
    <td>${categoryInfo(products.categoryID)}</td>
    <td>${companyInfo(products.companyID)}</td>
    <td><button type="button" class="btn btn-primary" onclick="editProducts(${i})">Edit</button></td>
    <td><button type="button" class="btn btn-Info" onclick="saveProducts(${i})">Save</button></td>

    <td><button type="button" class="btn btn-danger" onclick="deleteProduct(${i})">Delete</button></td>
    </tr>`;
   
});

tbody.innerHTML = rows;


}
displayProduct();

Итак, как вы видите, я изменил функцию, логика осталась прежней, но был добавлен код, связанный с HTML. Например, я хочу отобразить данные в таблице, поэтому я создал 2 переменные: первая нацелена на тело таблицы, а вторая — на пустую строку. Затем я прошелся по массиву товаров, используя forEach, который принимает два аргумента 'products и i', products содержит каждый элемент, а i имеет индекс. После этого, используя строки, я использовал (Backtick ``), чтобы добавить (строка ‹tr›) и (ячейка ‹td›) в таблице. В каждой ячейке для отображения данных, поступающих из массива, я использовал строки шаблона${}. Функции, которые я использовал для отображения названия категории и названия компании, я создал в предыдущей ЧАСТИ 1. Что касается функций редактирования, сохранения и удаления, которые вы видели в событии кнопки onclick, я создам их далее. 😁

HTML для отображаемой части:

<div class="p-5" style="color:black;">
                        <b> <h2>Display Product</h2></b>
                        <div class="table-responsive-lg">
                        <table class="table" >
                            <thead>
                                <tr>
                                    <th scope="col">#</th>
                                    <th scope="col">Product Name</th>
                                    <th scope="col">Product Price</th>
                                    <th scope="col">Product Category</th>
                                    <th scope="col">Product Bought from</th>
                                    <th scope="col">Action</th>
                                    <th scope="col">Action</th>
                                    <th scope="col">Action</th>



                                </tr>
                            </thead>
                            <tbody id="product-data"></tbody>
                        </table>
                    </div>

Теперь давайте перейдем к функции редактирования

Для редактирования я создаю две функции: «editProducts» и «saveProducts». Первая функция принимает значения и отображает их в форме, затем после редактирования данных, когда вы нажимаете кнопку сохранения, вызывается функция «saveProduct». Эти две функции вызываются в созданной выше функции ‘displayProduct’.

let editProducts = (i) => {

    document.getElementById('id').value = products[i].id;
    document.getElementById('name').value = products[i].name;

    document.getElementById('price').value = products[i].price;
    document.getElementById('cat').value = products[i].categoryID;
    document.getElementById('com').value = products[i].companyID;

}

Функция «editProducts» принимает аргумент «i» для определения индекса конкретного объекта. мы использовали эту функцию в функции ‘displayProduct’.

let saveProducts = (i) =>{
   
    var prod = products[i];
    prod.id = document.getElementById('id').value;
    prod.name = document.getElementById('name').value;

    prod.price = document.getElementById('price').value;
    prod.categoryID = document.getElementById('cat').value;
    prod.companyID = document.getElementById('com').value;

    products[i] = prod;
    displayProduct();
}

Функция «saveProducts» принимает аргумент «i» для сохранения данных конкретного объекта.

Теперь последней функцией является ‘deleteProduct’, которая также вызывается внутри функции ‘displayProduct’. Я использую функцию соединения javascript.

let deleteProduct = (i) =>{
    products.splice(i,1);   
    displayProduct();
      
}

Вот и окончательный результат!

Поздравляем!

Вы дошли до конца этого поста. Надеюсь, вам понравилось и вы правильно его изучили.

Я использовал самый простой метод для создания этого приложения CRUD. Это не составит труда, если вы уделите немного внимания. Попробуйте создать свой собственный интерфейс с помощью этих методов. это принесет больше удовольствия.

Пожалуйста, не стесняйтесь комментировать здесь, если у вас есть какие-либо мысли, чтобы поделиться со мной по этому поводу или если вы хотите, чтобы я создал другое приложение!

Следите за новостями!😍

Увидимся в следующей статье, а пока продолжайте учиться и продолжать исследовать!