Таблица сравнения в html / js

#javascript #html #reactjs

#javascript #HTML #reactjs

Вопрос:

Я новичок в html / javascript, и я хочу знать, как лучше всего создать такую таблицу, это как компаратор, когда я выбираю модель в выпадающем списке, таблица заполняется данными, которые соответствуют выбранной модели. Я могу использовать только html / javascript / react

таблица компаратора

Спасибо

Ответ №1:

Это грубый пример того, как может работать этот выпадающий список https://codesandbox.io/s/stoic-tdd-bqiq1?file=/src/App.js .

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

Я могу предоставить дополнительные пояснения, если в примере что-то неясно.

Ответ №2:

У вас может быть файл для описания вашей модели:

 function makeCar(carType, price, fuel){
    if(carType.toLower() != 'audi' || carType != 'bmw')
        carType = 'Audi' //default
    return {
        carType, price, fuel
    };
} 

И два компонента:

  • Один для отображения столбца car, использующего предыдущую модель.
  • Один для отображения всей таблицы.

Вот документация для написания html таблицы: https://www.w3schools.com/html/html_tables.asp

Вот документация для написания компонента react: https://reactjs.org/docs/react-component.html