JavaScript функция редактирования обычного CRUD - обновлять / редактировать поля ввода в таблице - PullRequest
Новая
       21

JavaScript функция редактирования обычного CRUD - обновлять / редактировать поля ввода в таблице

1 голос
/ 12 марта 2020

Мне нужна помощь по реализации для функции редактирования / обновления. Моя цель - редактировать / обновлять поля ввода от клиента. Заранее спасибо! Я пытался закодировать реализацию в функцию editFields(). Всякий раз, когда клиент нажимает кнопку «редактировать» , он может редактировать / обновлять текстовые поля из таблицы (см. Рисунок). enter image description here

HTML: 

    <!--CONTENT-->
<div class="content">
    <!--CONTENT-PAGE-->
    <div class="content__page">
        <!--CAR-FORM-->
        <div class="content__page__carForm">
            <form id="car-form">
                <label for="producer">Producer</label>
                <input type="text" id="producer" class="form-controll">
                <label for="model">Model</label>
                <input type="text" id="model" class="form-controll">
                <label for="color">Color</label>
                <input type="text" id="color" class="form-controll">
                <label for="price">Price</label>
                <input type="text" id="price" class="form-controll">
                <input type="submit" id="submit--button" value="Add Car" class="btn btn-primary btn-block">
            </form>
            <!--CAR-TABLE-->
            <table class="table table-striped" id="car-table">
                <thead>
                    <tr>
                        <th>Producer</th>
                        <th>Model</th>
                        <th>Color</th>
                        <th>Price</th>
                    </tr>
                </thead>
            </table>
        </div>
    </div>
</div>

JS: 

class Car {
constructor(producer, model, color, price) {
    this.producer = producer;
    this.model = model;
    this.color = color;
    this.price = price;
}

} 

class CarList {

static addCarToList(car) {
    const list = document.getElementById('car-table');
    const row = document.createElement('tr');

    row.innerHTML = `
    <td>${car.producer}</td>
    <td>${car.model}</td>
    <td>${car.color}</td>
    <td>${car.price}</td>
    <td><a href="#" class="btn btn-danger btn-sm delete id="delete-button">X</a></td>
    <td><a href="#" class="btn btn-success type="button" btn-sm edit id="edit-button">Edit</a></td>
    `;

    list.appendChild(row);
    CarBase.addCar();
    CarBase.removeCar();
}

static deleteCar(el) {
    if (el.classList.contains('delete')) {
        el.parentElement.parentElement.remove();
    }
}

static clearFields() {
        document.getElementById('producer').value = '';
        document.getElementById('model').value = '';
        document.getElementById('color').value = '';
        document.getElementById('price').value = '';
    }

static showAlert() {
        }

static editFields() {
    }

} ​​

lass CarBase {

static addCar() {
    document.getElementById('car-form').addEventListener('submit', (e) => {
        e.preventDefault();
        const producer = document.getElementById('producer').value;
        const model = document.getElementById('model').value;
        const color = document.getElementById('color').value;
        const price = document.getElementById('price').value;

        if (producer === '' || model === '' || color === '' || price === '') {
            alert('Please fill out all fields');
        } else {
            const car = new Car(producer, model, color, price);
            CarList.addCarToList(car);
            CarList.clearFields();
        }
    });
}
static removeCar() {
    document.getElementById('car-table').addEventListener('click', (e) => {
        CarList.deleteCar(e.target);
        CarList.showAlert();
    });
}

} 

const car1 = new Car('BMW', 'E63', 'Green', 15, 000);

CarList.addCarToList(car1);

...