Javascript возможность настраивать столбцы таблицы. Кнопка, которая позволяет пользователям удалять и добавлять новые столбцы

Question

Я хотел бы сделать мой стол настраиваемым.Я ищу возможность добавлять новые столбцы и удалять существующие столбцы.Для визуализации того, что я хочу сделать, вот мой сайт: https://www.coinmarketstreet.com/. Я хотел бы добавить кнопку, которая позволяет пользователям изменять макет таблицы.Например, если пользователь хочет удалить столбец «Доминирование» и отобразить столбец «Цена BTC», он может сделать это одним нажатием кнопки.

Вот моя таблица HTML:

<table class="table coin_table">
    <tr class="header_row">
      <th><%= sortable "rank", "#" %></th>
      <th class="text-center">Symbol</th>
      <th class="text-center"><%= sortable "name", "Coin" %></th>
      <th class="text-center"><%= sortable "price", "Price" %></th>
      <th class="text-center"><%= sortable "percent_change_1h", "Change(1Hr)" %></th>
      <th class="text-center"><%= sortable "change_24hr", "Change(24Hr)" %></th>
      <th class="text-center"><%= sortable "percent_change_7d", "Change(7D)" %></i></th>
      <th class="text-center"><%= sortable "market_cap", "Market Cap" %></th>
      <th class="text-center"><%= sortable "volume_24hr", "24 Hr Volume" %></th>
      <th class="text-center"><%= sortable "current_supply", "Current Supply" %></th>
      <th class="text-center">Dominance</th>
    </tr>

    <% @cryptos.each do |crypto| %>
      <tr class="text-center" data-link="<%= crypto_path(crypto.id) %>">
        <th class="column_1"><%= crypto.rank %></th>
          <td><div><%= fetch_image_tag(crypto.symbol, :width => 50, :height => 50, :crop => :fill) %></div></td>
        <td class = "center_style2"><div><%= crypto.name %></div><div>(<%= crypto.nick_name %>)</div></td>

        <% if crypto.price == nil %>
           <td class="center_style">?</td>
        <% else %>
            <% if crypto.price < 1 %>
              <td class="center_style"><%= convert_number_currency(crypto.price, cookies[:selected_currency], 6) %></td>
            <% else %>
              <td class="center_style"><%= convert_number_currency(crypto.price, cookies[:selected_currency], 2) %></td>
            <% end %>
        <% end %>

        <% if crypto.percent_change_1h == nil %>
          <td class = "center_style">?</td>
        <% else %>
          <% if crypto.percent_change_1h < 0 %>
            <td class="percent_change down center_style"><%= number_to_percentage(crypto.percent_change_1h, precision: 2) %></td>
          <% else %>
            <td class="percent_change up center_style"><%= number_to_percentage(crypto.percent_change_1h, precision: 2) %></td>
          <% end %>
        <% end %>

        <% if crypto.change_24hr == nil %>
          <td class = "center_style">?</td>
        <% else %>
          <% if crypto.change_24hr < 0 %>
            <td class="percent_change down center_style"><%= number_to_percentage(crypto.change_24hr, precision: 2) %></td>
          <% else %>
            <td class="percent_change up center_style"><%= number_to_percentage(crypto.change_24hr, precision: 2) %></td>
          <% end %>
        <% end %>

        <% if crypto.percent_change_7d == nil %>
          <td class = "center_style">?</td>
        <% else %>
          <% if crypto.percent_change_7d < 0 %>
            <td class="percent_change down center_style"><%= number_to_percentage(crypto.percent_change_7d, precision: 2) %></td>
          <% else %>
            <td class="percent_change up center_style"><%= number_to_percentage(crypto.percent_change_7d, precision: 2) %></td>
          <% end %>
        <% end %>

        <% if crypto.market_cap == nil %>
          <td class = "center_style">?</td>
        <% else %>
          <td class = "center_style"><%= convert_number_currency(crypto.market_cap, cookies[:selected_currency], 0) %></td>
        <% end %>

        <% if crypto.volume_24hr == nil %>
          <td class="center_style">$0</td>
        <% else %>
          <td class="center_style"><%= convert_number_currency(crypto.volume_24hr, cookies[:selected_currency], 0) %></td>
        <% end %>

        <% if crypto.current_supply == nil %>
          <td class="center_style">?</td>
        <% else %>
          <td class="center_style"><%= number_with_delimiter(crypto.current_supply, :delimiter => ',') + " " + crypto.nick_name %></td>
        <% end %>
        <td class="center_style"><%= number_to_percentage((crypto.market_cap / @market_cap_sum) * 100, precision: 2) %></td>
      </tr>
    <% end %>
</table>

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

Answer 1

Если вам нужно более комплексное решение, я бы также порекомендовал jQuery DataTables, посмотрите это для идей

Часть скрытия может быть легко выполнена с помощью базовых HTML, CSS и JQuery. Может быть, этого достаточно, чтобы дать вам представление, как делать то, что вы пытаетесь. Для этого примера я просто использую очень простую таблицу.

<style>
  .hidden {
  display: none;
}
</style>

<table>
  <tr class="header_row">
    <td class="column1", id="column1">col1</td>
    <td class="column2", id="column2">col2</td>
    <td class="column3", id="column3">col3</td>
  </tr>
  <tr>
    <td class="column1">col 1 stuff</td>
    <td class="column2">col 2 stuff</td>
    <td class="column3">col 3 stuff</td>
  </tr>
</table>

<script>
  $('tr td').click(function(){
    var toggleId = this.id;
    $('.'+toggleId).toggleClass('hidden');
  });
</script>

См. Пример работы с голыми костями: https://jsfiddle.net/a4rwgtdh/

Answer 2

Я предлагаю вам исследовать с помощью плагина DataTables jQuery. Несмотря на то, что он не может быть оптимальным масштабируемым решением, гораздо быстрее начать работу и выяснить, нужна ли эта функция вашим пользователям. В частности, имеется расширение button DataTables, которое позволяет конечным пользователям изменять таблицу на странице. Если вам необходимо сохранить предпочтения пользователя, возможно, вам придется написать эту часть самостоятельно.