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

Таблица цен 1, ссылка

Таблица цен 2 Ссылка

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

Среда

:root{
  --main-color: #4a4e69;
}

HTML — Структура

Таблица цен построена в классе «pricing_container», который содержит класс «subscription_options» и «setting». Класс «subscription_options» содержит три столбца (класс «подписка col1», «подписка col2» и «подписка col3»). Каждый класс «подписка» включает пять строк и один ‹h2› для общей стоимости.

<div class = "pricing_container">
   <div class="subscription_options">
          <div class="subscription col1">
            <div class="row1">
            </div>
            <div  class="row2">
            </div>
            <div  class="row3">
            </div>
            <div  class="row4">
            </div>
            <div  class="row5">
            </div>
            <h2>...</h2>
          </div>
          <div class="subscription col2">
            <div class="row1">
            </div>
            <div  class="row2">
            </div>
            <div  class="row3">
            </div>
            <div  class="row4">
            </div>
            <div  class="row5">
            </div>
            <h2>...</h2>
          </div>
          <div class="subscription col3">
            <div class="row1">
            </div>
            <div  class="row2">
            </div>
            <div  class="row3">
            </div>
            <div  class="row4">
            </div>
            <div  class="row5">
            </div>
            <h2>...</h2>
          </div>          
	</div>
  <div class="setting"> ... </div>
</div>

CSS Styling — ценовой контейнер

.pricing_container{
	font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  height: 120vh;
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

CSS Styling — варианты подписки

.subscription_options{
  width: 100%;
  max-width: 600px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 2px;
}

CSS-стилизация — подписка

.subscription{
  display: grid;
  width: 200px;
  grid-template-rows: repeat(6, 1fr);
  grid-template-columns: repeat(1, 1fr);
  border: solid 1px grey;
  border-radius: 5px;
  text-align: center;
}

CSS-стили — Col1 / Col2 / Col3

Первый столбец — это заголовок, поэтому я хочу, чтобы некоторое пространство отделяло столбец 1 от других столбцов (подробности и описания параметров).

.subscription.col1 {
  justify-self: center;
  width: 100px;
}
.subscription .row1{
  padding: 5px;
  align-self: center;
  text-align: center;
}

.subscription .row2 {
  padding: 5px;
  text-align: center;
  align-self: center;
  background-color: rgb(112, 175, 218);
}

.subscription .row3 {
  padding: 5px;
  text-align: start;
}

.subscription .row4 {
  padding: 5px;
  text-align: start;
}

.col1 .row4 {
  text-align: center;
}

.subscription .row5 {
  padding: 5px;
  text-align: start;
  border-bottom: solid 1px;
}

JavaScript — переключение и управление

Давайте возьмем пример первого базового варианта для онлайн-POS, расположенного в col2 и row3. При нажатии на ввод соотношения внутренняя строка HTML заменяется на 990 долларов США для идентификатора «online_price».

<div  class="row3" >
              <input type="radio" checked="checked" onclick="one_one();" name="online" id="one_one"> 
              <h4>Basic</h4> 
</div>
function one_one() {
  if (document.getElementById('one_one').checked === true) {
    document.getElementById('online_price').innerHTML = '$990';
  }
}

function one_two() {
  if (document.getElementById('one_two').checked === true) {
    document.getElementById('online_price').innerHTML = '$1500';
  }
}

function one_three() {
  if (document.getElementById('one_three').checked === true) {
    document.getElementById('online_price').innerHTML = '$2000';
  }
}

function two_one() {
  if (document.getElementById('two_one').checked === true) {
    document.getElementById('retail_price').innerHTML = '$1580';
  }
}

function two_two() {
  if (document.getElementById('two_two').checked === true) {
    document.getElementById('retail_price').innerHTML = '$2000';
  }
}

Ссылка демо

Спасибо! Наслаждайся этим!